CODEWITHSUNDEEP
reactjsmaterial-ui
Arud
Arud

Reputation: 151

How to use theme from themeprovider using react emotion

I have designed some styling using material UI theme.

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

export default createTheme({
  typography: {
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontSize: "1rem",
    },
    button:{
    fontFamily: "Pacifico",
    textTransform: "none",
    fontSize: "1rem",
    },
  },
});

I have designed my styles in HeaderStyles.js using makeStyles().

import { makeStyles } from "@mui/material/styles";

export const makeStyles((theme)=>{
  tab: {
    ...theme.typography.tab,
    color: "white",
    fontWeight: 700,
    minWidth: 10,
    marginLeft: "25px",
  },
  button: {
    ...theme.typography.button,
    borderRadius: "50px",
    marginLeft: "50px",
    marginRight: "25px",
    height: "45px",
  },
});

export default useStyles;

Now, I would like to use sx to inject my styles. I need to store the styles in a separate file and export them to use my styles. But How to access the material UI theme init?

Upvotes: 1

Views: 645

Answers (1)

Hamidreza
Hamidreza

Reputation: 1546

Styles from theme are applied to corresponding components by default, so you do not need to inject them in your custom styles.

Upvotes: 1

Related Questions