如何在物料界面覆盖css？

8aqjt8rx 于 2022-11-27 发布在其他

关注(0)|答案(4)|浏览(135)

我正在使用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>

截图：

css

来源：https://stackoverflow.com/questions/55403352/how-to-override-css-in-material-ui

4条答案

按热度按时间

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/

赞(0）回复(0）举报 2022-11-27

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

赞(0）回复(0）举报 2022-11-27

ryevplcw3#

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

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

然后：

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

赞(0）回复(0）举报 2022-11-27

0tdrvxhp4#

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

赞(0）回复(0）举报 2022-11-27

我来回答

如何在物料界面覆盖css？

4条答案

相关问题

热门标签

最新问答