如何在物料界面覆盖css?

8aqjt8rx  于 2022-11-27  发布在  其他
关注(0)|答案(4)|浏览(136)

我正在使用reactjs的材质UI。我想覆盖按钮颜色,但在我的情况下,它也会改变选项卡颜色(见截图)我如何才能覆盖按钮颜色,在材质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>

第二种方法也不起作用:

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

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

截图:

k5hmc34c

k5hmc34c1#

您可以使用取代自订元件的型式:

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/customization/overrides/

xoshrz7s

xoshrz7s2#

您在这里所做的就是更改整个主题。有很多方法可以更改应用中特定元素的样式或特定元素的所有外观。
在您的情况下,如果您尝试变更一个按钮的颜色,您可以使用覆写类别,如下所示:

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

ryevplcw3#

在调色板中创建新的颜色变体:

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

然后:

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

0tdrvxhp4#

如果有人还涉及到这个问题:MUI v5全局覆盖组件的解决方案记录在以下位置:全局样式替代

相关问题