How do you apply pseudo selectors for css using material style props?

Question

Currently I'm trying to apply a pseudo-selector using the material UI style prop object. Styles are currently applied with method with the exclusion of the pseudo element.

styles.jsx--

const SBoxMain = {
  display:"inline-block",
  margin:"0px 5px",
  hover: {backgroundColor: "yellow"}
}

Component.jsx--

<Box style={SBoxMain} id="Other" onClick={e => filterType("Other")}>
  <Box style={SBoxTile}>
    Other
  </Box>
</Box>

While above code does not throw any error, there is no pseudo element logic applied to the HTML. How would I implement logic for ::after and :hover respectively?

You can't target pseudo-selectors using inline styles. You need to use CSS classes. — Ryan Cogswell, Feb 24 '20 at 20:14

mcmcphillips · Answer 1 · 2020-08-05T18:12:50.893

0

pseudo selects can be used in conjunction with material ui classes.

content: {
display: "flex",
"&::before": {
  content: '""',
  boxShadow: "0 0 6px 1px #ccc"
},

To add pseudo-selectors to classes,just append "&" to the pseudo selector string.

edited Aug 05 '20 at 18:12

answered Feb 26 '20 at 23:41

mcmcphillips

49
7

How do you apply pseudo selectors for css using material style props?

1 Answers1