首页 文章

如何覆盖@media css以获取材料-ui反应组件

提问于
浏览 次
1

在this question中，我询问了如何覆盖material-ui组件的css属性，并提供了一个很好的例子 . 但是，在尝试设置工具栏组件的高度时，我发现由于过度拱形的@media规范，我无法覆盖css . 以下MuiTheme规范是我的方法：

const theme = createMuiTheme({
    overrides: {
        MuiToolbar: {
            regular: {
               height: "32px",
               minHeight: "32px"
        }
    },
  }
});

以下是css被覆盖的视觉效果：

enter image description here

如果我介绍一个hack并添加！重要的minHeight它的工作原理 . 显示此信息的代码框位于：https://codesandbox.io/s/4xmr2j2ny9

使用MuiTheme覆盖@media规范的正确方法是什么？

css reactjs material-ui

2 回答

  • 0

    您必须像下面一样添加它 . 媒体查询语句应用单引号括起来 .

    MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        '@media (min-width: 600px)': {
          minHeight: "48px"
        }
      },

    请找到codesandox - https://codesandbox.io/s/q8joyrrrwj

    回复于
  • 2

    MuiThemeProvider 对于v1.x material-ui 是可选的，我们使用withStyles创建的高阶组件将一组样式作为CSS注入到DOM中，这是一个不改变@media注释的工作示例：

    https://codesandbox.io/s/7klzx84z71

    回复于

相关问题