Material-ui: Using pseudoclasses in overriding styles

[mikkopori]

I'm, trying to override ::before and ::after -pseudo-classes but failing to do so. Following this documentation (https://material-ui.com/guides/api/#css-classes):

const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
};

with:

var style = {
      top: 'auto',
      left: 'auto',
      right: 'auto',
      margin: 0,
      maxWidth: 600,
      width: '110%',
      height: 64,
      '&$after': {
        backgroundColor: 'inherit',
      },
    }'

    return (
      <Provider>
        <div>
          <AppBar id='AppBar' style={style}>
            {menu}
          </AppBar>
        </div>
      </Provider>
    )`

But the pseudo-css does not appear for some reason?

In here (https://stackoverflow.com/questions/47024404/how-to-use-pseudo-selectors-in-material-ui) it is said to use:

'&:hover':

but that does not work either...

What am I doing wrong?

• [ ] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.?.? |
| React | |
| browser | |
| etc | |

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

&::after

[Sewdn]

@oliviertassinari When trying to configure global overrides in a theme, pseudo-classes dont seem to be applied correctly. Can you confirm that this is the correct way to have a FilledTextfiled use a different backgroundColor when being in focus:

const theme = createMuiTheme({
    ...
    overrides: {
      MuiCssBaseline: {
        "@global": {
          ...
        }
      },
      MuiFilledInput: {
        root: {
          backgroundColor: "rgba(255, 255, 255, 0.5)",
          "&:focused": {
            backgroundColor: "rgba(255, 255, 255, 0.95)"
          }
        }
      },
    }
  })
);

I can confirm backgroundColor is correctly being overriden, but the focused pseudo-class is not.

Thanks!

[oliviertassinari]

@Sewdn I would recommend to look at the injected CSS. Make sure the changes are in the CSSOM as well as you get the correct specificity and target the right element. Otherwise, you could ask on StackOverflow.