Material UI: "styled" 子组件未应用 css 规则

Question

我遇到了一个问题，我正在使用样式化函数来设置自定义 React 组件的样式，但未应用样式。在下面的示例中，我希望 Child 组件具有 color: red 样式，但它没有。但是，sibling 组件的样式正确。

import "./styles.css";
import { Child } from "./Child";
import { Typography } from "@mui/material";
import { styled } from "@mui/material/styles";

const StyledChild = styled(Child)(() => ({
  color: "red"
}));

const StyledSibling = styled(Typography)(() => ({
  color: "blue"
}));

export default function App() {
  return (
    <>
      <StyledChild />
      <StyledSibling>Sibling</StyledSibling>
    </>
  );
}

import { Typography } from "@mui/material";
import { FunctionComponent } from "react";

export const Child: FunctionComponent = () => {
  return <Typography>Child</Typography>;
};

CodeSandbox

Answer 1

styled 导致将 className 道具传递给包装组件，但 Child 没有将 className 道具传递给 Typography .

这是一个如何修复 Child.tsx 的示例：

import { Typography } from "@mui/material";
import { FunctionComponent } from "react";

export const Child: FunctionComponent<{ className?: string }> = ({
  className
}) => {
  return <Typography className={className}>Child</Typography>;
};

Material UI: "styled" 子组件未应用 css 规则

Material UI: "styled" child component not applying css rules

reactjs

material-ui