无法让@mui 5 样式的组件工作

Question

我正在按照 mui's website 上的教程获取框架的第 5 版。一切都很好，只是我不知道如何让样式化的组件工作。

import React from "react";
import { render } from "react-dom";

import { createTheme, styled, ThemeProvider } from "@mui/material/styles";

import { Button } from "@mui/material";

const theme = createTheme({
  palette: {
    primary: {
      main: "#4cfcb3",
      light: "#8affe5",
      dark: "#00c883",
      contrastText: "#000"
    },
    secondary: {
      main: "#00b0ff",
      light: "#69e2ff",
      dark: "#0081cb",
      contrastText: "#FFF"
    }
  }
});

const Test = styled(() => <div>TEST SHOULD BE RED</div>)({
  color: "red",
  backgroundColor: "#000"
});

const App = () => (
  <ThemeProvider theme={theme}>
    <Button color="primary" variant="contained">
      Hello Button
    </Button>
    <br />
    <br />
    <Test />
  </ThemeProvider>
);

render(<App />, document.getElementById("app"));

在这个例子中，我们可以看到按钮正确地获得了主题中指定的颜色，所以 that.s 很好，但是我的 Test 样式组件根本没有像你那样样式化可以在这里看到：

我做错了什么？

Answer 1

您可以替换此代码以使其工作

const Test = styled("div")(() => ({
  color: "red",
  backgroundColor: "#000"
}));

在您的 App 组件中，您可以将它与该表单一起使用 <Test>This is red </Test>

说明

如果你想为 html 元素设置样式，如 <div> 或 <p>，你需要用 "".

包装它

const StyledDiv = styled("div")(() => ({ some attributes }))

或者如果你想设置 Material UI 组件的样式（例如你可以这样使用它

const StyledButton = styled(Button)(() => ({ some attributes }))

Answer 2

你必须这样称呼它 this:

基本上，您必须删除回调并仅将其传递给 'div' 和具有 CSS 属性的配置对象。

要调用它，请使用组件的开始和结束标记。

import React from "react";
import { render } from "react-dom";

import { createTheme, styled, ThemeProvider } from "@mui/material/styles";

import { Button } from "@mui/material";

const theme = createTheme({
  palette: {
    primary: {
      main: "#4cfcb3",
      light: "#8affe5",
      dark: "#00c883",
      contrastText: "#000"
    },
    secondary: {
      main: "#00b0ff",
      light: "#69e2ff",
      dark: "#0081cb",
      contrastText: "#FFF"
    }
  }
});

const Test = styled('div')({
  color: "red",
  backgroundColor: "#000"
});




const App = () => (
  <ThemeProvider theme={theme}>
    <Button color="primary" variant="contained">
      Hello Button
    </Button>
    <br />
    <br />
    <Test>TEST SHOULD BE RED</Test>
  </ThemeProvider>
);

render(<App />, document.getElementById("app"));

无法让@mui 5 样式的组件工作

can't get @mui 5 styled components to work

reactjs

material-ui

styled-components