Material UI in React [ Day 25 ] Styles Advanced

今天要讲解的内容，在前面讲解theme的应用时，有稍微讲解了一些基本的应用，官方文件内前半部的内容我就不再提及了，我们会从 Overriding styles 开始讲解。

Overriding styles 覆盖样式

makeStyles（hook）和 withStyles (HOC) API 允许为每个样式表创建多个样式规则，每个样式规则都有自己的类名，类名通过 classes 变量提供给组件。

// A style sheet
const useStyles = makeStyles({
  root: {}, // a style rule
  label: {}, // a nested style rule
});

function Nested(props) {
  const classes = useStyles();
  return (
    <button className={classes.root}> // 'jss1'
      <span className={classes.label}> // 'jss2'
        nested
      </span>
    </button>
  );
}

function Parent() {
  return <Nested />
}

然而，类名通常是不确定的。父组件如何覆盖嵌套元素的样式？

withStyles

包装的组件接受一个 classes 属性，它只是合并样式表提供的类名。

const Nested = withStyles({
  root: {},
  label: {},
})(({ classes }) => (
  <button className={classes.root}>
    <span className={classes.label}> // 'jss2 my-label'
      Nested
    </span>
  </button>
));

function Parent() {
  return <Nested classes={{ label: 'my-label' }} />
}

makeStyles

这个就是前面范例中常用的方法

const useStyles = makeStyles({
  root: {},
  label: {},
});

function Nested(props) {
  const classes = useStyles(props);
  return (
    <button className={classes.root}>
      <span className={classes.label}> // 'jss2 my-label'
        nested
      </span>
    </button>
  );
}

function Parent() {
  return <Nested classes={{ label: 'my-label' }} />
}

String templates

如果你更喜欢 CSS 语法而不是 JSS，您可以使用 jss-plugin-template 插件。

import React from 'react';
import { jssPreset, StylesProvider, makeStyles } from '@material-ui/core/styles';
import { create } from 'jss';
import jssTemplate from 'jss-plugin-template';

const jss = create({
  plugins: [jssTemplate(), ...jssPreset().plugins],
});

const useStyles = makeStyles({
  root: `
    background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
    border-radius: 3px;
    font-size: 16px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  `,
});

function Child() {
  const classes = useStyles();
  return (
    <button type="button" className={classes.root}>
      String templates
    </button>
  );
}

function StringTemplates() {
  return (
    <StylesProvider jss={jss}>
      <Child />
    </StylesProvider>
  );
}

export default StringTemplates;

後面都属 jss 应用的部分，我就不再提及了，因为之後有机会做 JSS 系列的讲解时再来补足这部分的应用。

那麽今天的内容就先到这边了，明天的会讲解 API 的部分。