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

Question

我开始使用material-ui-next（branch next aka v1）作为ReactJS Web应用程序。我发现在设置放置在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内部组件的调色板不匹配

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2