Stack Overflow
Stack Overflow

Questions tagged [jss]

Use this tag for questions about JSS - A library for generating CSS from JavaScript.

JSS

A library for generating CSS from JavaScript.

Introduction

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

Links

Site: http://cssinjs.org/

Github: https://github.com/cssinjs/jss

494 questions
32
votes
2 answers

Styled-component vs jss vs emotion for React

I'm trying to understand the best choice (as a CTO) between jss emotion styled-component. I will try not to make the question "too wide" or "off-topic", because it's a very subjective topic. I'll try to answer (here) the question myself if no-one…
Cyril CHAPON
  • 3,556
  • 4
  • 22
  • 40
25
votes
3 answers

How to implement `CSS` nested rules in `JSS`?

I would like know how to work with css class-nesting in Material-UI or in JSS in general?I am trying as below. card: { cardHeader:{ marginTop:"30px" } }
Santhan Frankenstein
  • 251
  • 1
  • 3
  • 3
25
votes
5 answers

How to override Material-UI MenuItem selected background color?

Currently I am struggling with setting the background color of a MenuItem component which is selected to a different color. (without having to using !important to force it) The component code:
Kevin Vugts
  • 1,462
  • 4
  • 21
  • 39
25
votes
2 answers

Accessing previous theme variables in createMuiTheme

Running Material UI 1.0.0-beta.24 I'm setting a new theme using createMuiTheme: import {createMuiTheme} from 'material-ui/styles'; const theme = createMuiTheme({ typography: { fontSize: 16 } }); export default theme; How can I access the…
Romainpetit
  • 897
  • 2
  • 11
  • 29
22
votes
2 answers

How to use child selectors in JSS

I'm experimenting with JSS to see if it is realistic to migrate a Sass code base. I have a very basic example of a CSS style that, when hovered, modifies the style of a child node. span { color: red; } button:hover span { color:…
Jon Sakas
  • 2,042
  • 1
  • 21
  • 26
19
votes
4 answers

Blink animation in Material UI

I am building a GatsbyJS site with Material UI. Using the withStyles HOC, is it possible to make a blinking animation? I tried providing animation in styles: const styles = theme => ({ '@keyframes blinker': { from: {opacity: 1}, …
stan.codes
  • 329
  • 1
  • 3
  • 10
19
votes
3 answers

Styling element inside class Material UI

Is it possible to style all Fields inside Grid in Material UI? I already know how to do it in css but I can't find how to do this in jss I've tried this but not working: const styles = { shopForm: { textAlign: 'center', Field: { …
Reza Sam
  • 1,264
  • 2
  • 14
  • 29
15
votes
2 answers

How to style button from Material UI icon button

I am wondering how to apply styles to the Material UI's underlying Button from the IconButton. For example, in order to change the close icon hover/focus color, I need to currently change the :hover and :focus classes. It seems like there should be…
Kendall
  • 1,992
  • 7
  • 28
  • 46
14
votes
2 answers

Nested class in another selected class with makeStyles

I need to know how to target 'element' when root is selected This is makeStyles: const useStyles = makeStyles(theme => ({ root:{ '&.selected': { } }, element: { } }) This is jsx
Aladdin Mhemed
  • 3,817
  • 9
  • 41
  • 56
14
votes
3 answers

What does the symbol '&$checked' mean

import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; const useStyles =…
6899 huge
  • 198
  • 2
  • 12
12
votes
1 answer

MUI v5 Typescript makeStyles returns never

I'm trying to migrate my components from MUI v4 to v5, and I've gotten to a point where I don't know how to migrate my makeStyles components. Before, I had something like this that was working: const useStyles = makeStyles((theme: Theme) => ({ …
Vivere
  • 1,919
  • 4
  • 16
  • 35
12
votes
1 answer

material-ui makeStyles: how to style by tag name?

I want to add a rule for all

in the current component. I couldn't find information anywhere (material-ui documentation, Stack Overflow, etc.) on how to add CSS rules by tag name. Is it not supported? I'm trying to do something like this: const…

Liran H
  • 9,143
  • 7
  • 39
  • 52
12
votes
5 answers

Material-UI Input component underline color

I am trying to make an input component that has a white underline. Currently, when the user hovers over the component, the underline color changes to black. I would expect this be white. I believe this should be possible by overriding the…
Chris
  • 472
  • 1
  • 5
  • 16
11
votes
4 answers

Material-ui - TextField - Can't change helper text error color

I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persists the red. See CodeSandBox .
Lyle Classen
  • 113
  • 1
  • 1
  • 4
11
votes
3 answers

Styling BottomNavigation in React.js Material-UI

How do I change the color of the icon and text of the selected link (Home in this example) to red and the color of the icon and text of the inactive links (Course and Authors in this example) to green? The docs are very thin. class…
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
1
2
3
…
32 33