material-ui 如何運用主題的顏色
-
如何在一個組件里使用主題顏色?
如果你從Bootstrap CSS過來,你可能希望我們可以這麼寫:
<p class="text-primary">.text-primary</p>
寫成react就是這樣嘍:
<p className="text-primary">.text-primary</p>
很抱歉,這麼寫行不通!必須這麼弄:
import { withStyles } from "@material-ui/core/styles"; const styles = theme => ({ paper: { position: "absolute", width: "90%", backgroundColor: theme.palette.background.paper, boxShadow: theme.shadows[5], padding: theme.spacing.unit * 4, outline: "none", height: "90vh", overflowY: "scroll", color: theme.palette.primary.main } }); class YourComponent extends React.Component { ... } export default withStyles(styles)(YourComponent);
material-ui 默認主題屬性可以在這裡查看:https://material-ui.com/customization/default-theme/