我正在尝试建立自己的调色板颜色以匹配我在 Material-UI 中的品牌.到目前为止,我只能在将主要颜色和辅助颜色用作按钮的背景颜色时才能起作用.当我添加自己的变量名称时,例如使用accent"如 Material-UI 网站的示例所示,按钮默认为灰色.
I'm trying to establish my own palette colors to match my branding in Material-UI. So far I can only get the primary and secondary colors to work when applied as the background color to buttons. When I add my own variable names like use "accent" as shown as an example from Material-UI's website, the button defaults to grey.
这是我的 MyTheme.js 代码:
import { createMuiTheme } from 'material-ui/styles'; import purple from 'material-ui/colors/purple'; export default createMuiTheme({ palette: { primary: { // works main: '#165788', contrastText: '#fff', }, secondary: { // works main: '#69BE28', contrastText: '#fff', }, companyBlue: { // doesnt work - defaults to a grey button main: '#65CFE9', contrastText: '#fff', }, companyRed: { // doesnt work - grey button main: '#E44D69', contrastText: '#000', }, accent: { // doesnt work - grey button main: purple, // import purple doesnt work contrastText: '#000', }, }, });这是我的 App.js 代码:
import React, { Component } from 'react'; import Button from 'material-ui/Button'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import MyTheme from './MyTheme'; import './App.css'; import { withStyles } from 'material-ui/styles'; import PropTypes from 'prop-types'; const styles = theme => ({ button: { margin: theme.spacing.unit, }, input: { display: 'none', }, }); class App extends Component { constructor(props) { super(props); } render() { const { classes } = this.props; return ( <MuiThemeProvider theme={MyTheme}> <Button variant="raised" > Default </Button> <Button variant="raised" color="primary" className={classes.button}> Primary </Button> <Button variant="raised" color="secondary" className={classes.button}> Secondary </Button> <Button variant="raised" color="companyRed" className={classes.button}> Company Red </Button> <Button variant="raised" color="accent" className={classes.button}> Accent </Button> </MuiThemeProvider> ); } } App.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(App); 推荐答案除了需要将 MyTheme 中的 purple 更改为类似 purple[500],我不知道为什么这对你不起作用.您确定可以通过这种方式覆盖 primary 和 secondary 以外的任何内容吗?
Other than needing to change purple in your MyTheme to be something like purple[500], I'm not sure why this wouldn't work for you. Are you sure you can override anything other than the primary and secondary in this way?
无论如何,这里有一个解决方法:
Regardless, here's a workaround:
在 MyTheme.js 中:
accent: { backgroundColor: purple[500], color: '#000' }然后在 App.js 中:
<Button variant="raised" style={MyTheme.palette.accent} className={classes.primary}> Accent </Button>工作示例 此处.
更多推荐
如何添加自定义 MUI 调色板颜色
发布评论