Breaking News: Grepper is joining You.com. Read the official announcement!

material ui styled components with theme

Add Answer

DevPedrada answered on July 9, 2021 Popularity 9/10 Helpfulness 5/10

answer material ui styled components with theme

related styled components with theme mui

related material ui styled component

material ui styled components with theme

Comment

import { styled, withTheme } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"

export const StyledButton= styled(withTheme(Button))(props => ({
  background: props.theme.palette.background.paper,
}))

Popularity 9/10 Helpfulness 5/10 Language typescript

Source: stackoverflow.com

Tags: material-ui styled-components typescript

Link to this answer
Share Copy Link

Contributed on Jul 09 2021

DevPedrada

0 Answers Avg Quality 2/10

Closely Related Answers

styled components with theme mui

Comment

import * as React from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/system';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: 'white',
    },
  },
});

const MyThemeComponent = styled('div')(({ theme }) => ({
  color: theme.palette.primary.contrastText,
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(1),
  borderRadius: theme.shape.borderRadius,
}));

export default function ThemeUsage() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyThemeComponent>Styled div with theme</MyThemeComponent>
    </ThemeProvider>
  );
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: mui.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

material ui styled component

Comment

const MyStyledButton = styled(Button)`
  background-color: red;
  color: white;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <MyStyledButton color="primary">Foo</MyStyledButton>
      </div>
    </StylesProvider>
  );
}

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: material-ui mate

Link to this answer
Share Copy Link

Contributed on Dec 01 2021

Scary Sandpiper

0 Answers Avg Quality 2/10

material ui styled components with theme

Contents

More Related Answers

material ui styled components with theme

Closely Related Answers

styled components with theme mui

material ui styled component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.