Stack Overflow
Stack Overflow

Questions tagged [css-in-js]

Questions about writing CSS in JavaScript using libraries such as styled-components or emotion.

215 questions
154
votes
12 answers

Setting CSS pseudo-class rules from JavaScript

I'm looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript. So an analogue of the CSS code: a:hover { color: red } in JS. I couldn't find the answer anywhere else; if anyone knows that this…
user39882
  • 1,549
  • 2
  • 11
  • 4
25
votes
2 answers

What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?

This seems to be a best practice, since it is used almost everywhere. However, nowhere is it clearly explained what exactly it does ... I did find a comment in the docs that said: "This comment tells babel to convert jsx to calls to a function…
David Deprost
  • 4,072
  • 1
  • 20
  • 27
21
votes
5 answers

Material UI 5 class name styles

I migrated from Mui 4 to 5 and wonder how to use class names. If I want to apply certain styles to just one component there is the SX property. However, I'm struggling with using the same class for multiple components. In v4 my code looked like…
Tom
  • 1,358
  • 2
  • 14
  • 36
19
votes
1 answer

Using vanilla-extract as the styling engine for Material-UI

Some background Our team has been using Material-UI (MUI) for quite some time, and we love it. With the release of MUI v5, we took the time to check which styling solution we would use next, since JSS is being abandoned by the MUI team. We ended up…
panepeter
  • 3,224
  • 1
  • 29
  • 41
19
votes
4 answers

Styling Nested Components in Styled-Components

I have created a Dropdown Component in React using Styled Components. Here is a simplified outline of the component: const Dropdown = ( {title} {children} …
Moshe
  • 6,011
  • 16
  • 60
  • 112
18
votes
1 answer

How to pass props to a styled component in emotion? Using TypeScript

I am using styled by emotion at: import styled from '@emotion/styled' I am trying to pass props to a styled component like the guide mentions: https://emotion.sh/docs/styled It doesn't work for some reason. I use TypeScript as well. I pass props…
Contentop
  • 1,163
  • 3
  • 20
  • 43
15
votes
7 answers

Multiple Props Options for Styled Components

I have a navbar component that I have created using Styled Components. I would like to create some props that change the background-color and/or text color. For instance: should have the following CSS: background: #454545; color:…
Moshe
  • 6,011
  • 16
  • 60
  • 112
14
votes
1 answer

Material UI Potential Slow Performance of withStyles

I'm tasked with making a page in our react redux web app load faster. When the action for loading the page triggers we get what appears to be a small freeze of roughly .5 sec. I have the profiler open and at first glance nothing seems to be…
moondc
  • 372
  • 1
  • 5
  • 18
13
votes
3 answers

How to style body tag with CSS-in-JS approach?

I am a beginner to CSS-in-JS and emotion, and trying to port a sass react app to emotion. Right from the start I already have the issue of not knowing how to style the body tag. Do people generally use document.body.style to do this? I can't find…
David Deprost
  • 4,072
  • 1
  • 20
  • 27
10
votes
1 answer

MaterialUI TextField : changing background color is not working as it is supposed to

I'm trying to set the background color for TextField components in the app I'm working on, however it seems that when I add style={{background: "rgb(232, 241, 250)"}} to this component with my custom RGB values it displays them on top of the default…
Konstantink1
  • 575
  • 1
  • 8
  • 26
10
votes
5 answers

emotion css feature is not rendering the styles (React)

I'm using Webpack 4, Babel 7 and Emotion 10. I installed @emotion/core, @emotion/styled, and the recommended plugin babel-plugin-emotion. styled is working properly. I can create a styled component and use it. However, if I try to use the native…
Peter
  • 2,004
  • 2
  • 24
  • 57
9
votes
2 answers

Overriding styles antd component on V5

I want to customize the styles of some antd components written in cssinjs. I created a HOC component to access the theme and override some styles and call it after defining the providers import { useToken, useStyleRegister } from…
user2645494
  • 111
  • 4
9
votes
2 answers

Overriding antd variables with less on V5

I'm upgrading to antd v5 and i had some issues with keeping the variables overrides made from less files with v4 i have multiple less files inside src/theme one of them is with the following @import 'antd/lib/style/themes/variable.less'; /* font…
Ilyas Ghomrani
  • 408
  • 6
  • 26
9
votes
2 answers

Media Queries in Emotion Styled Components

The Emotion docs tell us how to make reusable media queries that works in the css prop. This allows us to make the following queries in a css prop:
Moshe
  • 6,011
  • 16
  • 60
  • 112
8
votes
4 answers

Styled Components - Conditionally render an entire css block based on props

I understand that styles can be conditionally rendered such as: const HelloWorldLabel= styled("div")<{ centered?: boolean }>` display: ${({ centered }) => (centered ? "block" : "flex")};; margin: ${({ centered }) => (centered ? "auto 0" :…
Null isTrue
  • 1,882
  • 6
  • 26
  • 46
1
2 3
…
14 15