Material-UI中的高级样式 [英] Advanced styling in material-ui
问题描述
我开始研究material-ui,并在SandBox中创建一个简单的应用程序: https://codesandbox.io/s/eager-ride-cmkrc
I start to study material-ui and create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc
jss的样式对我来说并不常见,但是如果您通过这两个简单的练习帮助我,那么我将理解所有内容.
The style of jss is unusual for me, but if you help me with these two simple exercises, then I will understand everything.
首先:我想将ButtonLeft
和ButtonRight
的通用属性合并到新类中并对其进行扩展:(
First: I want union common properties of ButtonLeft
and ButtonRight
into new class and extend it: (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",
}
但这是行不通的=(
第二:我希望当您将鼠标悬停在容器上时出现箭头,所以我这样写:
Second: I want the arrows to appear when you hover over the container, so I wrote this:
"&:hover .MuiIconButton-root": {
display: "block"
}
问题:MuiIconButton-root
它是所有IconButton的基类名称吗?但我想要这样的东西:
Problem: MuiIconButton-root
it is base className for all IconButtons? but I want something like this:
"&:hover ButtonLeft": {
display: "block",
backgroundColor: 'red'
},
"&:hover ButtonRight": {
display: "block",
fontSize: '50px'
}
请帮我完成这两个简单的任务,然后我会理解一切=)
Please, help me with these two simple tasks and then I will understand everything =)
推荐答案
jss-plugin-extend
默认不包含在Material-UI中.
jss-plugin-extend
is not included by default in Material-UI.
您可以在此处找到包含的JSS插件的列表: https://material -ui.com/styles/advanced/#jss-plugins .
You can find the list of included JSS plugins here: https://material-ui.com/styles/advanced/#jss-plugins.
您可以按照说明添加其他插件,但是也可以通过其他方式达到相同的效果.
You can follow the instructions for adding additional plugins, but you can also achieve the same effect in other ways.
您可以将通用属性放在对象中
You can put the common properties in an object:
const commonButton = {
display: "none",
position: "absolute",
fontSize: "24px"
};
export default props => ({
ButtonLeft: {
...commonButton,
left: "0",
},
ButtonRight: {
...commonButton,
right: "0",
}
});
或者因为您有一个root
规则,即按钮在结构上位于其中,所以您可以通过root
中的嵌套规则应用所有常见样式:
Or since you have a root
rule that the buttons are structurally within, you could apply all the common styles via nested rules in 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
引用的适当语法.
The example above leverages jss-plugin-nested
which is included in Material-UI by default. This also shows the appropriate syntax for the hover
references.
相关答案:
- Using material ui createStyles
- how to use css in JS for nested hover styles, Material UI
这篇关于Material-UI中的高级样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!