高级材料造型-ui

Question

我开始学习资料-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的基本className？但我想要这样的东西：

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

请帮助我完成这两个简单的任务，然后我会理解所有的事情=)

Answer 1

默认情况下，jss-plugin-extend不包括在Material中。

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

您可以按照添加额外插件的说明进行操作，但也可以通过其他方式实现相同的效果。

您可以将公共属性放在对象中：

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" }
});

​

​

上面的示例利用了默认情况下包含在Material中的jss-plugin-nested (是)。这还显示了hover引用的适当语法。

有关答复：

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