reactjs - MakeStyles (Material UI) 将样式应用于子元素

Question

我想知道是否可以使用 MakesStyles 仅将样式应用于子元素，例如在普通的 HTML/CSS 项目中:

<div className="parent">
  <h1>Title!</h1>
</div>

.parent h1 {
  color: #f00;
}

这将为 div 中的每个标题着色。
我尝试了几种不同的方法，其中之一是:

// Function
const { parent } = homeStyle()

return (
  <div className={parent}>
    <h1>Title!</h1>
  </div>
)

// Style
const homeStyle = makeStyles(theme => ({
  parent: {
    background: "#fff",
    h1: {
      color: "#f00",
    }
  },
}))

但是没有用。

Answer 1

如果您只想设置 material-ui H1 标题的样式，您可以选择它:

.parent .MuiTypography-h1 {
  color: #f00;
}

在下面的替代解决方案照片中，您将看到应用于具有 material-ui 的元素的类。检查器可以方便地识别您要选择的 material-ui 元素的名称。

您的里程可能会有所不同，具体取决于您的 CSS 设置。

---

然而，我从你的问题中读到的是希望选择一个 H1，可能在 <div> 中。与其他风格的 H1 不同。这可以通过 ThemeProvider 来完成在 material-ui 库中(docs here):

import { Typography } from "@material-ui/core";
import {
  createMuiTheme,
  responsiveFontSizes,
  ThemeProvider
} from "@material-ui/core/styles";

const Themed = ({ children }) => {
  const theme = createMuiTheme({
    overrides: {                          {/* <--  create a style override */}
      MuiTypography: {
        h1: {
          "&.styled": {         {/* <-- specify a className for overrides */}
            color: "red"
          }
        }
      }
    }
  });

  return (
    <ThemeProvider theme={responsiveFontSizes(theme)}>
      <>{children}</>
    </ThemeProvider>
  );
};

const App = () => {
  return (
    <Themed>

      <Typography 
        className="styled"               {/* <-- add the style from above */}
        variant="h1"> 

        Styled H1

      </Typography>

      <Typography 
        variant="h1">

        Not styled H1

      </Typography>

      <Typography 
        variant="h1">

        Me neither

      </Typography>

    </Themed>
  );
};

export default App;

工作 CodeSandbox .