标签: material-ui

我想设置滑块各个部分的颜色，手柄和轨道的两个部分：手柄之前和之后。或者更好：使滑块不可见（但仍然有效），这样我就可以根据滑块值自己绘制一些东西......

我不认为当前可用的样式属性使我能够做到这一点？

我的反应组件中有材质 UI 表。我想将 onCellClick 事件添加到表格的每一行。但是当我将 onCellClick 添加到每个 TableRow 时，它不会被触发。但是当我将它添加到我的表格标签时，它就会被解雇。问题是当我将它添加到 Table 标签时，只能对所有行采取一种类型的操作。如果我想在每次单击时对每一行做不同的事情怎么办。这就是为什么我想让所有的 TableRow 标签都有自己的 onClick 类型的事件。我怎样才能做到这一点？

这是我在 Table Tag 上使用 onCellClick 事件的代码，这是我不想要的。

class TagDetailTable extends Component {
        handleButtonClick() {
            browserHistory.push("TagList")
        }

        handleCellClick(){
            console.log("cell clicked")
        }

        render() {
            return (
                <MuiThemeProvider>
                <div>
                    <Table onCellClick= {this.handleCellClick}>
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>ID</TableHeaderColumn>
                                <TableHeaderColumn>Type</TableHeaderColumn>
                                <TableHeaderColumn>Category</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            <TableRow>
                                <TableRowColumn>1</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>2</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>3</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>4</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>5</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow> …

根据docs， material-ui 支持持久抽屉。
但我预期的行为是像照片一样剪下的持久抽屉。

我的侧边栏组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Face from 'material-ui-icons/Face';
import Person from 'material-ui-icons/Person';
import Assignment from 'material-ui-icons/Assignment';
import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage } from 'react-intl';
import styles from '../../../../style/components/global/Sidebar.scss';

const cx = require('classnames/bind').bind(styles);

const rootStyles = theme => ({
  list: {
    width: 250,
    flex: 'initial',
  }, …

我在 React 表中有一个按钮，它根据相邻列中的值被禁用。例如，如果相邻列中的值是 Claimed，则该按钮将被禁用，但是如果它的值为 Failed 或为空，则可以单击该按钮。现在，我可以禁用按钮……但是按钮的颜色没有改变。我为按钮使用 Material UI React 组件。禁用时如何更改按钮的颜色？

代码如下所示：

    <FlatButton
          label="CLAIM"
          disabled={
                  item.status === "Claimed" ||
                  item.status === "Progress" ||
                  item.status === "Resolved"
                }
          onClick={//Some action here}
          labelStyle= {
          {
            color: '#FFFFFF',
            fontWeight: 600,
            fontSize: 11,
          }}
          style= {
          {
            borderRadius: '2px',
            width: '60px',
            border: 'solid 1px #d8dde3',
            backgroundColor: '#00bfa5',
          }}

我将如何从material-ui版本中的第一个版本重新创建全屏抽屉@next？

我曾经能够做到这一点

<Drawer width={'100%'} open={this.props.eventsDrawer} className="events-drawer">
...
</Drawer>

但现在我看不到这样做的方法？我是否必须使用 CSS 来实现这一点，如果是这样，我将它应用于什么元素？

我在反应项目中有选项卡组件。

我有 2 个标签。选项卡 1 和选项卡 2。当用户单击选项卡 1 的包含以选择我想将活动选项卡从选项卡 1 更改为选项卡 2 时。

例如。

我有两个选项卡 Tab1 和 Tab2。Tab1 包含 test1 和 test 2。Tab2 包含 test3 和 test4。

当用户单击 test1 （Tab1 的包含）时，我想将活动选项卡从 Tab1 更改为 Tab2。

我该怎么做。

要求是我有标签，例如：颜色和值，例如：橙色。所以我想将标签显示为工具提示，将值显示为芯片。芯片有可能吗？如果没有，我有没有其他办法可以实现这一目标。

我正在使用material-ui版本v0.18.7。

我注意到 MaterialUI 的网站上没有关于更改 Tabs 组件下划线颜色的文档......

http://www.material-ui.com/#/components/tabs

const fontWeightMedium = 500;
const theme = createMuiTheme({
  typography: {
    // Use the system font.
    fontFamily:
    'forzaBook',
    fontWeightMedium,
    body1: {
      fontWeight: fontWeightMedium,
    },
    button: {
      fontStyle: 'italic',
    },
    caption: {
      fontWeight:100
    }
  },
  palette: {
    primary: orange,
    secondary: {
      ...grey,
      // A400: '#00e677',
    },
    contrast: 'white',
    error: red,
  }
});

这是我目前用于更改字体和一些版式属性的内容。但我需要更改标题的字体。有谁知道如何做到这一点？

我很难从Material UI TextField组件中删除自动填充上的黄色背景。

在旧版本中，我是这样进行的：

const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };
<TextField
    ...
    inputStyle={inputStyle}
/>

但是在最新版本中，该inputStyle道具已删除并添加InputProps。

我试图用这种方法将其删除，但是黄色背景颜色仍然出现：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  },
  input: {
    ':-webkit-autofill': {
        WebkitBoxShadow: '0 0 0 1000px white inset',
        backgroundColor: 'red !important'
    }
  } …