How to override css in material UI?

material-ui withstyles
material-ui global styles
material-ui theme
material-ui styled-components
material-ui button
material-ui dangerouslysetinnerhtml
material-ui css injection order
material-ui hover

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:

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/

Overrides, The first way to override the style of a component is to use class names. the names of classes to override (keys) to the CSS class names to apply (values). Overriding with classes When the className property isn't enough, and you need to access deeper elements, you can take advantage of the classes property to customize all the CSS injected by Material-UI for a given component. The list of classes for each component is documented in the Component API section.

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();

4 Ways to Override Material UI Styles | by John Au-Yeung, This way, styles we referenced from external CSS files will override Material UI's. Example. The component is published to Bit.dev. Feel free to� We can use the injectFirst boolean prop to add styles that override existing Material UI styles. This way, styles we referenced from external CSS files will override Material UI’s.

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>

A Better Way to Style Material-UI? | by siriwatknp, This story is about another way of styling Material-UI components instead of using “withStyles”. Now, You all Here are the problems I face when I tried to override it. Card DOM that already contain CSS-in-JS className. We need to use higher order function with "withStyles" to override material ui classes export default withStyles(styles) (NavigationBar); 3.

How to override (overwrite) classes and styles in material-ui (React , To override material ui classes we need to understand these things: Add your styles in a const variable at the top const styles = { root: { backgroundColor: 'transparent ! We need to use higher order function with "withStyles" to override material ui classes. How to Override CSS Styles Table of Contents¶. Cascading order; Inheritance; Internal Priorities! Important; Sometimes developers have to work with old codes, and it is when they run into some big problems, in particular, the inline style that cannot be overridden.

Overriding Material UI styles with Styled Components.md � GitHub, This ensure CSS injected by the styled-components will always win, and it only need to be exercise once and before browser start to paint the next frame. Aside from accessing nested elements, the classes property can be used to customize the special states of Material-UI components:.MenuItem {color: black;}.MenuItem.selected {/* Increase the specificity */ color: blue;} < MenuItem selected classes = {{root: 'MenuItem', selected: 'selected'}} > Why do I need to increase specificity to override one component state?

How to use styled components with Material UI in a React app, Among the edge cases we will cover are: overriding Material UI's theme, prioritize the CSS rules of styled components and override classes� I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do. Basically, on a table row hover, I want to make it set a background color different from what it is currently doing.

Comments
  • The link is dead, any ideas where is best to read about this now?
  • Huh, when I click it I'm seeing a Page Not Found error: pasteboard.co/Ikjcdhw.png
  • I couldn't understand you could can you please elaborate? Why are you passing props. Lets say if I have 3 buttons and all 3 of them should have different colors how can I do that ?
  • I've added a custom theme example to my answer. That way all of the buttons are overriden from within your theme.
  • I don;t want all buttons some buttons I want default color some I want to have different colors ,in that case, what should I do ? Because changing theme will affect all the buttons ? I want to change a few buttons to red few buttons to some other custom color
  • There are many ways. You can create a styled button with a few variants, each using it's own class to change the color. Or you can create a styled button that takes the color as a prop.
  • Where are you using MuiButton ? I couldn't understand that
  • Can I add any random name inside of primary, secondary, tertiary eg: myBtn and then use it color="myBtn" but this doesn't work.
  • @funjoker You should be able to use random names. Did my code not work?
  • It doesn't work see my edited question above. 2nd approach also doesn't work
  • check this link: imgur.com/a/IMVmEsm and this material-ui.com/api/button