I'm following the tutorial on

What am I doing wrong?

CodePudding user response：

You can replace this code to make it work

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

and inside your App component you can you use it with that form <Test>This is red </Test>

Explanation

If you want to styled a html element like <div> or <p> you need to do wrap it with "".

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

or if you want to style a Material UI component (for example then you can use it like this

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

CodePudding user response：

You have to call it like this:

Basically you have to remove your callback and only pass it the 'div', and a config object with the CSS properties.

To call it use the opening and closing tag of the component.

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"));