相关疑难解决方法(0)

我正在使用 Material UI 并尝试将普通的 css 类转换为 js 文件。

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navItem {
    float: left;
    flex: 1;
}

.navLink {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1 rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    min-width: 0;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.navLink-static {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    padding: 10px;
    margin-left: 10px; …

我开始研究material-ui并在SandBox中创建一个简单的应用程序： https: //codesandbox.io/s/eager-ride-cmkrc

jss 的风格对我来说很不寻常，但是如果你帮我做这两个简单的练习，那么我就会明白一切。

第一：我想要将ButtonLeft和的共同属性合并ButtonRight到新类中并扩展它：（https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object）

ButtonControll: {
    display: "none",
    position: "absolute",
    fontSize: "24px"
},
ButtonLeft: {
    extend: 'ButtonControll',
    left: "0",
},
ButtonRight: {
    extend: 'ButtonControll',
    right: "0",
}

但这不起作用=(

第二：我希望当您将鼠标悬停在容器上时出现箭头，所以我这样写：

"&:hover .MuiIconButton-root": {
    display: "block"
}

问题：MuiIconButton-root它是所有 IconButtons 的基类名称吗？但我想要这样的东西：

"&:hover ButtonLeft": {
    display: "block",
    backgroundColor: 'red' 
},
"&:hover ButtonRight": {
    display: "block",
    fontSize: '50px' 
}

请帮助我完成这两个简单的任务，然后我就会明白一切=）

在材质UI，延长之间的距离MuiInputLabel和MuiInput，我要重写的marginTop label + .MuiInput-formControl。

但是，createMuiTheme的覆盖仅提供对 Mui 组件 CSS 的直接覆盖，例如：

createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

我该怎么做：

createMuiTheme({
  overrides: {
    'label+MuiInput': {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

谢谢...