score:17
material-ui v5
you can change the body styles by overriding muicssbaseline
styles in createtheme()
:
import cssbaseline from "@mui/material/cssbaseline";
import darkscrollbar from "@mui/material/darkscrollbar";
import { createtheme, themeprovider } from "@mui/material/styles";
const theme = createtheme({
components: {
muicssbaseline: {
styleoverrides: {
body: {
...darkscrollbar(),
color: "darkred",
backgroundcolor: "grey",
"& h1": {
color: "black"
}
}
}
}
}
});
export default function globalcssoverride() {
return (
<themeprovider theme={theme}>
<cssbaseline />
<content />
</themeprovider>
);
}
material-ui v4
you can apply the styles to the body
using @global class
like this:
const useglobalstyles = makestyles({
"@global": {
body: {
backgroundcolor: "tomato"
}
}
});
const theme = createmuitheme({});
function mythemeprovider({ children }) {
useglobalstyles();
return <themeprovider theme={theme}>{children}</themeprovider>;
}
function app() {
return (
<mythemeprovider>
<button variant="contained" color="primary">
button
</button>
</mythemeprovider>
);
}
if you create the project by create-react-app
, you can also use css/scss module to style any element globally:
/* styles.css */
body {
color: white;
font-size: 15px;
}
import react from "react";
import button from "@material-ui/core/button";
import "./styles.css";
function app() {
return (
<button variant="contained" color="primary">
hello world
</button>
);
}
live demo
score:0
in material-ui v5 there are two ways to do this:
with the globalstyles
component:
import * as react from 'react';
import globalstyles from '@material-ui/core/globalstyles';
export default function app() {
return (
<react.fragment>
<globalstyles styles={{ h1: { color: 'grey' } }} />
<h1>grey h1 element</h1>
</react.fragment>
);
}
edit on codesandbox
or if you are already using the cssbaseline
component for setting baseline styles:
import { themeprovider, createtheme } from '@material-ui/core/styles';
const theme = createtheme({
components: {
muicssbaseline: {
styleoverrides: `
h1 {
color: grey;
}
`,
},
},
});
export default function app() {
return (
<themeprovider theme={theme}>
<cssbaseline />
<h1>grey h1 element</h1>
</themeprovider>
);
}
edit on codesandbox
from the official docs: global css override
score:2
another approach outlined in the docs > themes > globals section:
if you are using the
cssbaseline
component to apply global resets, it can also be used to apply global styles.
here's an example:
import { createmuitheme, themeprovider } from "@material-ui/core/styles";
import cssbaseline from "@material-ui/core/cssbaseline";
const theme = createmuitheme({
overrides: {
muicssbaseline: {
"@global": {
body: {
backgroundcolor: "tomato"
}
}
}
}
});
export default function app() {
return (
<themeprovider theme={theme}>
<cssbaseline />
<div classname="app">
<h1>hello codesandbox</h1>
</div>
</themeprovider>
);
}
demo in codesandbox and stack snippets
const { themeprovider, createmuitheme, cssbaseline } = materialui
const theme = createmuitheme({
overrides: {
muicssbaseline: {
"@global": {
body: {
backgroundcolor: "tomato",
},
},
},
},
})
const app = () => {
return (
<themeprovider theme={theme}>
<cssbaseline />
<div classname="app">
<h1>hello codesandbox</h1>
</div>
</themeprovider>
)
}
reactdom.render(<app />, document.getelementbyid("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>
<div id="root"></div>
update for mui 5
create your theme like this:
import { createtheme } from "@mui/material";
export const theme = createtheme({
components: {
muicssbaseline: {
styleoverrides: {
body: {
backgroundcolor: "tomato"
}
}
}
}
});
further reading: global styles with react and material ui
Source: stackoverflow.com
Related Query
- How to style body element in MUI
- How can I add style to the body element with JSS?
- How to style MUI Tooltip?
- How do you change a style of a child when hovering over a parent using MUI styles?
- MUI - How can I style the scrollbar with CSS in JS?
- how do I style an Alert element in react-native?
- How to add style to React Element if it's created this way?
- Style the dropdown element of MUI Select
- How to style adornment in MUI TextField?
- How to style button from MUI icon button
- How to change the style of an element in React?
- How can I create a style element and append to head in React?
- How to style body tag with CSS-in-JS approach?
- How to change parent-component style element according to its child-component state?
- How To Apply Inline Style and className to Same Element
- How to style the border of a MUI outlined TextField?
- How to give Typography-like style to an input element with Material-ui?
- How to change the style of one element when I hover another element (ReactJS)?
- How to apply CSS to body element if prop is present?
- How to style a 'amp-img' element with styled-components?
- How to add style or class name and remove other element from web component?
- How to keep and loop the style of HTML element from an Array in REACT?
- How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom element
- How to make element position change smooth using inline style tag?
- How to adjust the content style in the body of react-draft-wysiwyg
- How to pass a custom style to MUI V5 styled component?
- How can I sort using MUI Datatable using value, instead of what's in my custom body render?
- How to inline style child DOM element React?
- How to change a style of an HTML element in React?
- How do I change the style of an element through another element selector with withStyle from materialUI
More Query from same tag
- How to use Material UI component in react
- React vs ReactDOM?
- React: useContext value is not updated in the nested function
- com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'Hello': was expecting (JSON String, Number, Array,)
- Updating state of component when onSubmit and display on page
- create-react-app eslint error "Parsing error: 'import' and 'export' may appear only with 'sourceType: module'"
- useState doesn't change when needed
- laravel reactjs put all api request in one get request
- Race condition with load event in Javascript
- React Redux Toolkit access value inside array of objects
- Wrong state value in event listener handler after setState
- Changing elements (like fixed logo) color, depending on the section in React
- How to show message when there are no products related to search results
- How to use React without unsafe inline JavaScript/CSS code?
- Resize image inside of a container to make it smaller if there is more text
- How can I wrap the Children of a Parent component in a HOC and render them in React?
- issues in downloading the pdf files using axios in reactjs (context api)
- custom format in numeral.js negative number (-20) to be 20(-)
- Cart funcionality using Context Api
- How can I set the proper scroll position my reactcomponent?
- inline css and html tags in react gives Error
- Being more concise React
- What's the difference between `useRef` and `createRef`?
- Jest finds tests but doesn't collect coverage
- How to handle invalid routes in Nodejs?
- Change behavior of Steps React component from Ant Design(https://ant.design/components/steps/)
- React-i18next does not load translations on page reload
- Material UI Autocomplete - unchecking checkboxes in renderOption using Redux dispatch
- How to run React code from inner HTML file?
- React Mongoose item price based on variations