小编典典

Material-UI中的高级样式

reactjs

我开始研究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' 
}

请帮我完成这两个简单的任务,然后我将理解一切=)


阅读 529

收藏
2020-07-22

共1个答案

小编典典

jss-plugin-extend 默认情况下,不包含在Material-UI中。

您可以在此处找到包含的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" }
});

编辑jss嵌套

上述杠杆的例子jss-plugin-nested,其 默认包含在材料的UI。这也显示了hover引用的适当语法。

2020-07-22