Question

我开始使用 material-ui-next（branch next aka v1）作为ReactJS网络应用。我发现在设置放置在AppBar中的Typography组件的默认和预期颜色应该是一些困难。

我已经定义了这个material palette，你可以通过选择indigo作为主要颜色来看到，自动将文本主色设置为白色（#ffffff）。这也得到了官方material documentation的靛蓝调色板的确认。

然而，默认颜色为黑色。如果我将color属性设置为default它仍为黑色，那么使其工作的唯一方法是将其设置为inherit。

我为什么要这样做？我错过了什么吗？

同样的问题也发生在IconButton上。

您可以在下面找到我的代码。在构造函数中，我设置了调色板自定义值，然后在render()中将主题传递给MuiThemeProvider。

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { indigo, lightBlue, red } from 'material-ui/colors';
import AppBar from 'material-ui/AppBar/AppBar';
import Toolbar from 'material-ui/Toolbar/Toolbar';
import Typography from 'material-ui/Typography/Typography';
import IconButton from 'material-ui/IconButton';
import DeleteIcon from 'material-ui-icons/Delete';

class App extends React.Component {
  constructor() {
    super();

    const options = {
      palette: {
        primary: indigo,
        secondary: lightBlue,
        error: red,
      },
    };

    this.theme = createMuiTheme(options);
  }

  render() {
    return (
      <MuiThemeProvider theme={this.theme}>
        <AppBar>
          <Toolbar>
            <Typography color="inherit">
              My App
            </Typography>
            <IconButton color="inherit" aria-label="Menu">
              <DeleteIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>
    );
  }
}

export default App;

这是我的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './material/App';

ReactDOM.render(<App />, document.getElementById('root'));

提前谢谢。

Answer 1

这有点歪曲，但是，它应该是这样的：主题必须尽可能完整，以满足您的所有需求。仅定义主要和次要颜色是不够的，您需要利用配置JSON对象提供的所有可能性，否则它将使用默认值。

进入一些细节，假设你想要一个输入组件（对于我有的排版问题以相同的方式工作，但这个例子更完整）有白色文本和白色下划线你可以创建一个包装该主题的主题通过传递此选项对象来输入组件：

const options = {
  palette: {
    text: {
      primary: grey[50],
    },
    input: {
      bottomLine: grey[50],
      inputText: grey[50],
    }
  },
};

然后像这样使用它：

  <MuiThemeProvider theme={createMuiTheme(options)}>
    <Input
      label="File name"
      placeholder="Untitled-1"
      required
    />
  </MuiThemeProvider>

或者，定义一个利用每个组件样式结构的样式对象（可从官方文档的API部分获得），并将其用作withStyles（）组件。

  const styles = {
    root: {
      color: 'white',
    },
    underline: {
      '&:before': {
        backgroundColor: 'white',
      },
      '&:hover:not($disabled):before': {
        backgroundColor: 'white',
        height: 2,
      },
    },
  };

并设置如下样式：

  <Input
    classes={{
      root: classes.root,
      underline: classes.underline,
    }}
    label="File name"
    placeholder="Untitled-1"
    required
  />

不要忘记导出为withStyles（）组件。

 export default withStyles(styles)(FileName);

也许这是最快捷的方式，但这对我来说很好。

Answer 2

使用

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';


const muiTheme = getMuiTheme({
  palette: {
    primary1Color: "#000000", //primary
    accent1Color: "#741b1d", //seconday
  }
});

和

<MuiThemeProvider muiTheme={muiTheme}>

也

palette: {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.pinkA200,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.deepPurpleA700,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
    pickerHeaderColor: Colors.cyan500,
  }

默认颜色与AppBar内部组件的调色板不匹配

2 个答案: