material-ui 中的高级样式
Advanced styling in material-ui
我开始研究material-ui并在SandBox中创建一个简单的应用程序:https://codesandbox.io/s/eager-ride-cmkrc
jss的风格对我来说很不寻常,但是如果你帮我做这两个简单的练习,那么我就会明白一切。
首先:我想将 ButtonLeft
和 ButtonRight
的共同属性联合到新的 class 中并扩展它:(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 的基础 class名称?但我想要这样的东西:
"&:hover ButtonLeft": {
display: "block",
backgroundColor: 'red'
},
"&:hover ButtonRight": {
display: "block",
fontSize: '50px'
}
请帮我完成这两个简单的任务,然后我就会明白一切=)
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-plugin-nested
,默认情况下 是 包含在 Material-UI 中。这也显示了 hover
引用的适当语法。
相关回答:
我开始研究material-ui并在SandBox中创建一个简单的应用程序:https://codesandbox.io/s/eager-ride-cmkrc
jss的风格对我来说很不寻常,但是如果你帮我做这两个简单的练习,那么我就会明白一切。
首先:我想将 ButtonLeft
和 ButtonRight
的共同属性联合到新的 class 中并扩展它:(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 的基础 class名称?但我想要这样的东西:
"&:hover ButtonLeft": {
display: "block",
backgroundColor: 'red'
},
"&:hover ButtonRight": {
display: "block",
fontSize: '50px'
}
请帮我完成这两个简单的任务,然后我就会明白一切=)
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-plugin-nested
,默认情况下 是 包含在 Material-UI 中。这也显示了 hover
引用的适当语法。
相关回答: