Advanced styling in material-ui

Question

I start to study material-ui and create a simple app in the SandBox: https://codesandbox.io/s/eager-ride-cmkrc

The style of jss is unusual for me, but if you help me with these two simple exercises, then I will understand everything.

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",
}

But it's doesn't work =(

Second: I want the arrows to appear when you hover over the container, so I wrote this:

"&:hover .MuiIconButton-root": {
    display: "block"
}

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 =)

Katlin

Answer 1

jss-plugin-extend is not included by default in Material-UI.

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

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

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.

Related answers:

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

Fiorenze

Thanks! I have one more question - what symbol '$' mean? I couldn't find any info about $ in css/jss – Katlin

It is described in the jss-plugin-nested documentation that I linked to in the answer. cssinjs.org/jss-plugin-nested/… – Fiorenze