Как переопределить CSS в пользовательском интерфейсе материала?

Question

Я использую UI материала с реагировать. Я хочу переопределить цвет кнопки, но в моем случае это также меняет цвет вкладок (см. Скриншот). Как я могу переопределить только цвет кнопки, используя темы в пользовательском интерфейсе материала? Код:

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>

2-й подход также не работает:

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

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

Скриншот:

Answer 1

То, что вы делаете здесь, меняет всю тему.Есть несколько способов изменить стиль определенных элементов или все виды определенного элемента в вашем приложении.

В вашем случае, если вы пытаетесь изменить цвет для одной кнопки, вы можетеиспользуйте классы переопределения следующим образом:

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

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

Если вы хотите переопределить все кнопки, вы можете сделать это с помощью настраиваемой темы:

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

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

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

  });
};

export default creatCustomTheme();

Answer 2

Вы можете настроить стиль компонента, используя переопределения:

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
            },
        },
    },
});

Проверьте эту страницу: https://material -ui.com / настройка / переопределения /

Answer 3

Создайте новый цветовой вариант в вашей палитре:

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

и затем:

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