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

Question

我开始将 ma​​terial-ui-next (branch next aka v1) 用于 ReactJS 网络应用程序。 在为放置在 AppBar 内的 Typography 组件设置默认颜色和预期颜色时，我发现了一些困难。

我已经定义了这个material palette，正如您通过选择靛蓝作为原色看到的那样，文本原色自动设置为白色（#ffffff）。官方material documentation的靛蓝调色板也证实了这一点。

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

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

我在一个主题中有also seen that，也可以自定义text 属性。 这是正确的轨道吗？而且，如果是的话，我该如何使用 text.primary 例如，因为 docs states Typography 只能接受作为值 default|accent|error|primary|secondary|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 对象提供的所有可能性，否则它将使用默认值。

详细介绍一下，假设您想要一个 Input 组件（与我遇到的 Typography 问题的工作方式相同，但这个示例更完整）具有白色文本和白色下划线，您可以创建一个包含它的主题通过传递此选项对象输入组件：

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,
  }