Open gracekrcx opened 4 years ago
第一次改 MuiSelect 改到快瘋可以再試試
Add a ThemeProvider to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions.
use the createMuiTheme()
補充: This example creates a theme object for custom-built components. 底下的 example 是創造一個 theme object 給你自己客製的 compoent If you intend to use some of the Material-UI's components 如果你打算使用 Material-UI's components you need to provide a richer theme structure using the createMuiTheme() method. 你需要使用一個更豐富的 theme structure,使用 createMuiTheme() 這個方法 Head to the the theming section to learn how to build your custom Material-UI theme.
const useStyles = makeStyles((theme) => ({
root: {
background: theme.background, // 在這裡引用
border: 0,
fontSize: 16,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
}));
function DeepChild() {
const classes = useStyles();
return (
<button type="button" className={classes.root}>
Theming
</button>
);
}
const themeInstance = {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};
export default function Theming() {
return (
<ThemeProvider theme={themeInstance}>
<DeepChild /> // 非 material ui
</ThemeProvider>
);
}
Typography
changing font family of all material-ui(version 1) components
Palette 調色板
這裏修改 main: orange[300],其他的色階都會 calculated from palette.secondary.main,也是 docs 裡面寫的 Providing the colors directly If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main", according to the "tonalOffset" value.
每個都自己來
const theme = createMuiTheme({ status: { danger: orange[500], }, });
useTheme
得到 theme 的方法之一