Material-ui: [JSS] Pseudo elements are not working

Created on 13 Jun 2018  路  6Comments  路  Source: mui-org/material-ui

  • [x] 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


Pseudo elements (::before and ::after) are working.

Current Behavior


Pseudo elements (::before and ::after) are not working.

Steps to Reproduce (for bugs)

  1. https://codesandbox.io/s/x2yv65109q
  2. ::before styles are applied to Button, but are not visible (even in dev tools)

Context


Note, that custom JssProvider is not configured - I'm just using single component from @material-ui/core. But I believe I don't have to configure JssProvider to make jss plugins work.

Also, looks like other pseudo-selectors are not working too.

Am I doing something wrong?

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.1 |
| React | 16.3.2 |
| browser | Chrome |
| etc | |

external dependency support

Most helpful comment

  button: {
    "&::before": {
-     content: "before"
+     content: "'before'"
    }
  }

All 6 comments

  button: {
    "&::before": {
-     content: "before"
+     content: "'before'"
    }
  }

馃憢 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 Thanks! Sorry for such a silly question

What if we want to use a space for content? In normal css '' or ' ' works but not with JSS?

Never mind solved it as per @oliviertassinari comment here https://github.com/cssinjs/jss/issues/242#issuecomment-261735197

  button: {
    "&::before": {
-     content: "before"
+     content: "'before'"
    }
  }

@oliviertassinari XD

Was this page helpful?
0 / 5 - 0 ratings

Related issues

revskill10 picture revskill10  路  3Comments

pola88 picture pola88  路  3Comments

finaiized picture finaiized  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

TimoRuetten picture TimoRuetten  路  3Comments