clone 属性
！！响应式字体大小
[cc lang=”js”]const theme = createMuiTheme();
theme.typography.h1 = {
fontSize: ‘3rem’,
‘@media (min-width:600px)’: {
fontSize: ‘4.5rem’,
},
[theme.breakpoints.up(‘md’)]: {
fontSize: ‘6rem’,
},
};[/cc]
自定义变量
[cc lang=”js”]
import Checkbox from ‘@material-ui/core/Checkbox’;
import { createMuiTheme, withStyles } from ‘@material-ui/core/styles’;
import { ThemeProvider } from ‘@material-ui/styles’;
import { orange } from ‘@material-ui/core/colors’;
const styles = theme => ({
root: {
color: theme.status.danger,
‘&$checked’: {
color: theme.status.danger,
},
},
checked: {},
});
let CustomCheckbox = props => (
);
CustomCheckbox.propTypes = {
classes: PropTypes.object.isRequired,
};
CustomCheckbox = withStyles(styles)(CustomCheckbox);
const theme = createMuiTheme({
status: {
// My business variables
danger: orange[500],
},
});
function CustomStyles() {
return (
);
}
export default CustomStyles;[/cc]
****************
每个 material-ui 组件都有一个 class 类， theme 可以从写这个类，类的样式可以到组件详情里看到
当配置变量不够强大的时候，您可以使用theme的overrides来让Material-UI隐式地为您注入样式规则。 这是一个非常强大的特性。
[cc lang=”js”]const theme = createMuiTheme({
overrides: {
// Style sheet name ⚛️
MuiButton: {
// Name of the rule
text: {
// Some CSS
color: ‘white’,
},
},
},
});[/cc]
**************