首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么实质性UI主题覆盖不起作用?

为什么实质性UI主题覆盖不起作用?
EN

Stack Overflow用户
提问于 2021-07-28 09:53:54
回答 1查看 868关注 0票数 0

我使用物质UI "createTheme“函数。当ı为按钮写重写并切换时,它就不工作了。Material的所有重写功能都没有工作,但主题调色板,字体大小工作。为什么不起作用?提前谢谢。//我的越权

代码语言:javascript
复制
 overrides: {
      MuiButton: {
        primary: {
          background: "pink",
        },
        sizeSmall: {
          height: 22.5,
          fontSize: 10,
          padding: "0 15px",
        },
        sizeLarge: {
          height: 37,
          padding: "0 30px",
          fontSize: 16,
        },
        text: {
          background: "#1AD971",
          borderRadius: 4,
          border: 0,
          color: "white",
          padding: "0 22px",
          height: 30,
          textAlign: "center",
          lineHeight: 1,
          fontSize: 14,
          fontWeight: 400,
          "&:hover": {
            backgroundColor: "#0BBF5D",
          },
        },
        contained: {
          backgroundColor: "#FFFFFF",
          color: "#000000",
          borderRadius: 30,
        },
        outlined: {
          color: "#1AD971",
          border: "1px solid #1AD971",
          borderRadius: "15px",
        },
      },
      MuiSwitch: {
        switchBase: {
          color: "#73889D",
        },
        colorSecondary: {
          "&$checked": {
            color: "#FFFFFF",
          },
        },
        track: {
          opacity: 1,
          backgroundColor: "#213348",
          "$checked$checked + &": {
            opacity: 1,
            backgroundColor: "#FFC231",
          },
        },
      },
    },
EN

回答 1

Stack Overflow用户

发布于 2022-05-14 10:22:43

如果您正在使用MUI版本5,如上面的注释所述,您应该使用以下代码

代码语言:javascript
复制
const theme = createTheme({
  components: {
    MuiButton: {
        styleOverrides: {
            root: {
                border: '1px solid #ff4742',
                background: 'white',
                borderRadius: 12,
                border: 0,
                color: 'black',
                height: 48,
                padding: '0 30px',
                fontWeight: 'bold',
                boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
            }
        }
    },
}});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68558168

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档