3. material-ui 如何運用主題的顏色

material-ui 如何運用主題的顏色

  • 梵
    administrators

    如何在一個組件里使用主題顏色？
    如果你從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/

    0