我开始研究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)
ButtonLeft
ButtonRight
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的基类名吗?但我想要这样的东西:
MuiIconButton-root
"&:hover ButtonLeft": { display: "block", backgroundColor: 'red' }, "&:hover ButtonRight": { display: "block", fontSize: '50px' }
请帮我完成这两个简单的任务,然后我将理解一切=)
jss-plugin-extend 默认情况下,不包含在Material-UI中。
jss-plugin-extend
您可以在此处找到包含的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:
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,其 被 默认包含在材料的UI。这也显示了hover引用的适当语法。
jss-plugin-nested
hover