Material-ui: styled-jss not overriding material-ui styles when using &:hover (codesandbox included)

[freddydumont]

When setting up styled-jss, the only JSS option allowing proper CSS syntax highlighting in the editor that I know of, I came across an issue where the &:hover selector wouldn't override the material-ui styles. I've tried the fixes referenced by other issues and the documentation to no avail, including but not limited to the && hack and stylesheet injection in head (not sure it's even relevant in this case).

Also, on chrome but not firefox, text-decoration: none isn't applied.

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

The button should change color on hover.

Current Behavior

Material-ui styles take over this hover pseudo-selector

Steps to Reproduce (for bugs)

1. Add jss, react-jss, jss-template, and styled-jss to your project

"dependencies": {
    "@material-ui/core": "^1.2.1",
    "jss": "^9.8.7",
    "jss-template": "^1.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-jss": "^8.5.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "styled-jss": "^2.2.3"
  },

1. Create a JssProvider component and configure your jss as suggested by the docs to use template literals. Wrap component over App.

import React from 'react';
import { create } from 'jss';
import template from 'jss-template';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, template()] });

function JssTemplate(props) {
  return (
    <JssProvider jss={jss} generateClassName={createGenerateClassName()}>
      {props.children}
    </JssProvider>
  );
}

export default JssTemplate;

1. Implement a button with a hover effect and add it to your component tree at desired location.

import React from 'react';
import styled from 'styled-jss';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

const StyledButton = styled(Button)`
  text-decoration: none;
  background-color: #15df89;
  color: #fff;
  font-size: 2em;
  font-weight: 500;
  padding: 15px 50px;
  margin: 15px 0 25px 0;

  &:hover {          <---- NOT WORKING
    background-color: #15df89;
  }
`;

const RegisterButton = () => (
  <Link to="/login">
    <StyledButton variant="contained" size="large">
      Register
    </StyledButton>
  </Link>
);

export default RegisterButton;

1. Submit an issue to material-ui.

Context

Explained above.

Your Environment

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

[oliviertassinari]

Neither it's working with a native button: https://codesandbox.io/s/5k917959kp. So, Material-UI is outside of the equation.

Be aware of the payload overhead of styled-jss, you might want to use a small wrapper instead: https://material-ui.com/customization/css-in-js/#styled-components-api-15-lines-

[freddydumont]

Thanks for the quick answer. The issue I encountered with this wrapper is that its syntax doesn't trigger CSS highlighting which was the main objective.

Is there a way in Material-UI to declare CSS in a template literal like so?

styled(Component)`CSS goes here`

[oliviertassinari]

Is there a way in Material-UI to declare CSS in a template literal like so?

Yes, the same way you would do it with styled-jsx: https://codesandbox.io/s/0q03lz6pxv.
Hum, I fear nesting isn't supported by jss-template. You have to fallback to the JavaScript approach :/.