如何添加自定义 MUI 调色板颜色 [英] How to add custom MUI palette colors
问题描述
我正在尝试建立自己的调色板颜色以匹配我在 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 调色板颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!