在 Material UI 中使用带有样式 API 的多个 CSS 规则名称

Question

我正在使用 Material UI 并且我想使用带有 styled API.

的多个规则名称来设计组件样式

假设我想将 FormLabel Component 的样式设置为蓝色，将星号（必需）设置为红色。

有了 Hook API 我会做这样的事情：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'

const useStyle = makeStyles({
  root: {
    color: 'blue'
  },
  asterisk: {
    color: 'red'
  },
})

const FormLabel = ({ children }) => {
  const classes = useStyle()
  return (
    <MuiFormLabel
      classes={{
        root: classes.root,
        asterisk: classes.asterisk
      }}
    >
      {children}
    </MuiFormLabel>
  )
}

我可以使用 API 样式将 root AND asterisk 传递给我的组件吗？

我试过了，但没用

import React from 'react'
import { styled } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'

const StyledFormLabel = styled(MuiFormLabel)({
  '.MuiFormLabel-root': {
    color: 'blue'
  },
  '.MuiFormLabel-asterisk': {
    color: 'red'
  },
})

const FormLabel = ({ children }) => (
  <StyledFormLabel>{children}</StyledFormLabel>
)

Answer 1

下面是正确语法的示例。默认情况下，传递给 styled 的对象中的顶级键被假定为 CSS 属性名称。通过在键的开头添加 &，它让 styled 知道您正在定义嵌套规则。 .MuiFormLabel-root 是不必要的，因为根级别是默认应用属性的地方（例如下面示例中的 color: "blue"）。 & 是对根级别 class 的引用，因此 & .MuiFormLabel-asterisk 以 MuiFormLabel-asterisk class.

为后代元素的目标

import React from "react";
import { styled } from "@material-ui/core/styles";
import MuiFormLabel from "@material-ui/core/FormLabel";

const StyledFormLabel = styled(MuiFormLabel)({
  color: "blue",
  "&.Mui-error": {
    color: "purple"
  },
  "& .MuiFormLabel-asterisk": {
    color: "green"
  },
  "& .MuiFormLabel-asterisk.Mui-error": {
    color: "red"
  }
});

const FormLabel = ({ children }) => (
  <>
    <StyledFormLabel required>{children}</StyledFormLabel>
    <br />
    <StyledFormLabel error required>
      {children}
    </StyledFormLabel>
  </>
);
export default FormLabel;

在 Material UI 中使用带有样式 API 的多个 CSS 规则名称

Using multiple CSS rule names with the styled API in Material UI

reactjs

material-ui

styled-components

css-in-js