javascript - material-ui 中的高级样式

Question

我开始研究 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 它是所有 IconButton 的基类名称？但我想要这样的东西:

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

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

Answer 1

jss-plugin-extend 默认不包含在 Material-UI 中。

您可以在此处找到包含的 JSS 插件列表:https://material-ui.com/styles/advanced/#jss-plugins .

您可以按照说明添加额外的插件，但您也可以通过其他方式达到同样的效果。

您可以将公共(public)属性放在一个对象中:

const commonButton = {
  display: "none",
  position: "absolute",
  fontSize: "24px"
};
export default props => ({
  ButtonLeft: {
    ...commonButton,
    left: "0",
  },
  ButtonRight: {
    ...commonButton,
    right: "0",
  }
});

或者因为您有一个 root 规则，按钮在结构上位于其中，您可以通过 root 中的嵌套规则应用所有常见样式:

export default props => ({
  root: {
    width: "250px",
    height: "182px",
    alignItems: "center",
    justifyContent: "space-between",
    border: "1px solid black",
    position: "relative",
    "& $ButtonLeft, & $ButtonRight": {
      display: "none",
      position: "absolute",
      fontSize: "24px"
    },
    "&:hover $ButtonLeft, &:hover $ButtonRight": {
      display: "block"
    }
  },
  ButtonLeft: { left: "0" },
  ButtonRight: { right: "0" }
});

上面的例子利用了 jss-plugin-nested默认情况下， 包含在 Material-UI 中。这也显示了 hover 引用的适当语法。

相关回答:

• > Using material ui createStyles
• > how to use css in JS for nested hover styles, Material UI