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
155
votes
13 answers

How to add multiple classes in Material UI using the classes props?

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 …
Fatah
  • 2,184
  • 4
  • 18
  • 39
123
votes
22 answers

How to change the border color of Material UI TextField

I can't seem to figure out how to change the outline color of an outlined variant TextField I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps" Property but this seems to do nothing. Here is my code…
kinger6621
  • 1,503
  • 2
  • 10
  • 16
104
votes
3 answers

Clsx - What is and how to use it

I am trying to understand some uses of clsx in assigning classnames to a component in React. The construct className={clsx(classes.menuButton, open && classes.hide)} is clear enough. It applies classes.menuButton, and also applies classes.hide if…
millport
  • 2,411
  • 5
  • 23
  • 19
99
votes
2 answers

How to apply custom animation effect @keyframes in Material UI?

I have learned to use animation in CSS using @keyframe. I however want to write my custom animation code for my React project (using Material UI). My challenge is how I can write the Javascript code to custom my animations using the makeStyle() in…
mykoman
  • 1,715
  • 1
  • 19
  • 33
96
votes
9 answers

jss how to change opacity for a color

Currently I am using the following code to add a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I would like to know if exist a function to add opacity based on…
GibboK
  • 71,848
  • 143
  • 435
  • 658
92
votes
3 answers

CSS pseudo selectors with Material UI

I have seen in a lot of the Material UI code that they use pseudo selectors in their react styled components. I thought I would try to do it myself and I cannot get it to work. I'm not sure what I am doing wrong or if this is even possible. I am…
Joff
  • 11,247
  • 16
  • 60
  • 103
72
votes
2 answers

styled-components - how to set styles on html or body tag?

Ordinarily, when using pure CSS, I have a style sheet that contains: html { height: 100%; } body { font-size: 14px; } When using styled-components in my React project, how do I set styles for the html or body tags? Do I maintain a separate…
JoeTidee
  • 24,754
  • 25
  • 104
  • 149
71
votes
3 answers

idiomatic way to share styles in styled-components?

trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).attach() export default function(props) { return…
tony_k
  • 1,983
  • 2
  • 20
  • 27
65
votes
6 answers

CSS child selector in Material UI

Trying to write a style with Material UI equivalent to this in CSS .deleted td { background: red } But not sure how to do it in Material UI's CSS in JS way. Here are the relevant snippets I have currently const styles = theme => ({ deleted:…
hackerl33t
  • 2,117
  • 3
  • 14
  • 21
62
votes
11 answers

Styling the placeholder in a TextField

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element. Basically, I would like to change the default styling of the placeholder text, and the normal bag of tricks doesn't work, as I…
oligofren
  • 20,744
  • 16
  • 93
  • 180
59
votes
4 answers

How do you change a style of a child when hovering over a parent using Material UI styles?

I'm using Material UI in react. Let's say I have this component with these styles: const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor:…
Pieter Buys
  • 1,280
  • 1
  • 10
  • 20
46
votes
9 answers

How to set default value in material-UI select box in react?

I am using Select box from material-ui I want to show "select the value" option by default selected but after that user is not able to select this option.
user944513
  • 12,247
  • 49
  • 168
  • 318
40
votes
13 answers

Material UI - How can I style the scrollbar with CSS in JS?

I really hate having to have an external stylesheet for my scrollbar stylings and I want to put it in with the rest of my styles on my root component. I have tried this... const styles = (theme: Theme) => createStyles({ scrollBar: { …
Joff
  • 11,247
  • 16
  • 60
  • 103
34
votes
7 answers

Cant remove padding-bottom from Card Content in Material UI

When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't…
Alexander
  • 607
  • 1
  • 6
  • 11
33
votes
4 answers

Material UI and TypeScript: How to use !important?

I'm building a React application and I'm using Material UI for my components. I wonder how I can give an !important property to a style? I tried this: I'm using withStyles and WithStyles. Then in my styles.ts: left: { …
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
1
2 3
…
32 33