CODEWITHSUNDEEP
reactjsmaterial-uibackground-colorpaper-elementsthemeprovider
Tej Partap Singh
Tej Partap Singh

Reputation: 11

Paper background color not changing using Material UI ThemeProvider

I am creating a react frontend using Material UI. I have created a basic Paper component and I want to change its background color and set it to the primary color set in ThemeProvider. Following is my code

import React from 'react'
import './App.css'

import 'fontsource-roboto'
import { Grid } from '@mui/material'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import { responsiveFontSizes } from '@mui/material'
import { CssBaseline } from '@mui/material'
import Button from '@mui/material/Button'
import { Typography } from '@mui/material'
import { Box } from '@mui/system'
import { Paper } from '@mui/material'
const defaultTheme = createTheme({
  palette: {
    primary: {
      main: '#091425',
      contrastText: '#E2DEDE'

    },
    secondary: {

      main: '#e0164a',
      contrastText: '#E2DEDE'
    }
  },
})


function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Typography variant='h1'>Sample Text</Typography>
      <Button variant = "contained" color="primary">Sample Button</Button>
      <Grid container justifyContent= "center">
        <Paper elevation = {10}  backgroundColor= "primary" style= {{height: 75, width: 75}}  />  
      </Grid>


    </ThemeProvider>

  )
}

export default App;

The primary color is applied correctly to the button element but not to the paper. Any help appreciated.

Upvotes: 1

Views: 3272

Answers (2)

wildgamer
wildgamer

Reputation: 355

About your question, you can try to use sx to set the background color, I provide you an example and let you try.

<Grid>
<Paper sx={{backgroundColor: '#091425'}}  />
 </Grid>

Upvotes: 1

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

The color is not applied to paper because it doesn´t have a backgroundColor prop as you can see here.

You can do it using the sx prop (docs here):

<Paper
   sx={{
      backgroundColor: "primary.main"
   }}
   elevation={10}
   style={{ height: 75, width: 75 }}
/>

Upvotes: 1

Related Questions