CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
fun joker
fun joker

Reputation: 1727

How to override css in material UI?

I am using material UI with reactjs. I want to override button color but in my case it changes tabs color also (see screenshot) how can I override button color only, using themes in material UI ? Code: 

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
    },
});


<MuiThemeProvider theme={theme}>
    <AppBar position="static">
           <Tabs value={value} onChange={this.handleTabChange}>
           <Tab label="USDT" />
           <Tab label="BTC" />
           <Tab label="ETH" />
           </Tabs>
        </AppBar>

    {value === 0 && <TabContainer>
    <Button variant="contained" color="primary" fullWidth={true}>
              Buy/Login
         </Button>
    </TabContainer>}
</MuiThemeProvider>

2nd approach also doesn't work:

    const theme = createMuiTheme({
        palette: {
            myBtn: {
                main: '#DDB61A',
            }
        }
    });

<MuiThemeProvider theme={theme}>    
    <Button variant="contained" color="myBtn" fullWidth={true}>
          Buy/Login
    </Button>
</MuiThemeProvider>

Screenshot:

enter image description here

Upvotes: 0

Views: 15891

Answers (4)

Manuel
Manuel

Reputation: 1

If someone still comes to this question: The solution for MUI v5 to globaly override components is documented here: Global style overrides

Upvotes: 0

Marharyta
Marharyta

Reputation: 51

You can customize the style of a component using overrides:

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#ce93d8', // main color
        },
        secondary: {
            main: '#1d83c6',
        },
    },
    overrides: {
        MuiButton: { // Name of the component ⚛️ / style sheet
            root: { // Name of the rule
                background: '#DDB61A', // Some CSS
            },
        },
    },
});

Check this page: https://material-ui.com/customization/overrides/

Upvotes: 5

Eran Goldin
Eran Goldin

Reputation: 969

What you are doing here is changing the entire theme. There are a number of ways to change the style of specific elements, or all the appearances of a specific element in your app.

In your case, if you are trying to change the color for one button, you can use override classes like so:

const buttonStyle = (theme) => ({
    root: {
        background: 'red'
    },
});

const StyledButton = (props) => withStyles(styles)(
    <Button classes={{root}}/>
);

If you want to override all of the buttons, you can do that with a customized theme:

import { createMuiTheme } from '@material-ui/core/styles';

export const createCustomTheme = () => theme => {
  return createMuiTheme({
    ...theme,

    overrides: {
      MuiButton: {
        root: {
          background: 'red'
        }
      },
    }

  });
};

export default creatCustomTheme();

Upvotes: 1

Ralph
Ralph

Reputation: 337

Create a new color variant in ur palette:

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
        tertiary: {
            main: '#000',
        },
    },
});

and then:

<Button variant="contained" color="tertiary" fullWidth={true}>
              Buy/Login
         </Button>

Upvotes: 0

Related Questions