mui-theme-variables v0.0.5

MUI-THEME-VARIABLES

Description

It is not the best way to write CSS code in a JavaScript file because the code becomes complicated, so this library enables you to use MUI theme properties as CSS variables, so you can use them in separate CSS and SCSS files.

Note

When you create a custom theme, the variables will change automatically

Installation

Installation is done using the npm install command:

$ npm install mui-theme-variables

Example

In the app.js file

import { useTheme } from "@mui/material/styles";
import { useVariables } from "mui-theme-variables";
import "./style.css"

const theme = useTheme();
const { variables } = useVariables(theme)

// put the variables in the style prop in the main container

<div style={variables}>
    <h1 className="h1">Hello world</h1>
</div>

In the CSS file

.h1 {
  color: var(--palette-primary-main);
}

In the SCSS file

.h1 {
  color: var(--palette-primary-main);
}

Variables