CODEWITHSUNDEEP
reactjsmaterial-ui
Mac Limlengco
Mac Limlengco

Reputation: 86

How to style a global elements using material ui?

I need to style *, *:after, *:before using material ui, also I need to change the global font-family of the web app. How do i achieve this?

Material-UI Version: 1.0.0-beta.5

React Version: 15.4.1

Upvotes: 2

Views: 6240

Answers (3)

DBrown
DBrown

Reputation: 5529

For the longest time this was one of those hidden options in Material-UI, but now the easiest way to style any element in the DOM is to use the @global class provided by jss-plugin-global:

const GlobalCss = withStyles({
    "@global": {
      "html, body": {
        margin: 0,
        padding: 0
      },
      ".App": {
        backgroundColor: "blue",
        fontFamily: "sans-serif",
        textAlign: "center"
      }
    }
  })(() => null);

Here's a CodeSandbox project as an example, using this method replacing the usual css file.

This feature is referenced here in the docs

Update: MUI v5 has a dedicated component for global styles, but works the same way:

import { GlobalStyles } from '@mui/material'

...

  const globalStyle = {
    a: {
      textDecoration: 'none'
    }
  }

  return (
    <>
      <GlobalStyles styles={globalStyle} />
      <App />
    </>
  )
}

Upvotes: 7

Allan Felipe Murara
Allan Felipe Murara

Reputation: 526

fontFamily is a property of theme. You need to pass down the propertys with a "MuiThemeProvider" wrapper.

const theme = createMuiTheme({  
  palette : {
    primary: {  
      light:  '#fff8e1',
      main: '#fff8e1',
      dark:  '#fff8e1',
    },
  }, 
  typography: {
    useNextVariants: true,
    fontFamily : 'Poppins',
    fontSize : 12,
  },
});


<MuiThemeProvider theme={theme}>
  <CssBaseline />
  <React.Fragment>
    <Typography variant='h4'>
    </Typography>
  </React.Fragment>
</MuiThemeProvider>

API < MuiThemeProvider>

API Themes

Upvotes: 1

Harlan
Harlan

Reputation: 847

  1. Write your global css rule in a separate file.
  2. In your project, find out the entry html file named like index.html or maybe other name.
  3. add css link links to the file of step1 in that html file as normal html file do.

Upvotes: 1

Related Questions