css-in-js Questions
2
Solved
How can I override a rule of a class which has high specificity?
For example, the .MuiAccordionSummary-content.Mui-expanded class in the AccordionSummary
const useStyles = makeStyles(() => ({
e...
Lioness asked 14/9, 2020 at 8:36
4
I have an application made up of two parts:
(A) legacy application (AngularJs) with its own CSS classes.
(B) div containing a completely new application (React). B is built with webpack, postcss a...
Clarethaclaretta asked 1/12, 2021 at 13:17
2
Solved
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 wi...
Sept asked 3/11, 2020 at 15:24
5
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...
2
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 { u...
Moolah asked 30/1, 2023 at 15:37
2
Solved
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
@impor...
4
Solved
I would like to declare some css variables that I will reuse among my components. This is how you do it with plain css:
:root {
--box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3);
}
That would the...
Gardia asked 8/12, 2019 at 2:0
5
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...
Chessman asked 20/9, 2021 at 8:50
7
Solved
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: <Navbar dark> shoul...
Catalonia asked 8/5, 2019 at 19:19
0
We're adding style src 'self' to the HTML page and emotion is generating styles dynamically to the header like below
<head>
<style data-emotion>
...
</style>
<style data-em...
Santasantacruz asked 31/1, 2022 at 10:51
1
Some background
Our team has been using Material UI for quite some time, and we love it. With the release of Material UI v5, we took the time to check which styling solution we would use next since...
Josejosee asked 24/9, 2021 at 11:29
2
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:
<div
css={{
color: 'green',
[mq[0]]: {
co...
Lam asked 1/1, 2020 at 12:0
4
I have created a Dropdown Component in React using Styled Components. Here is a simplified outline of the component:
const Dropdown = (
<DropdownBase>
<Trigger>
{title}
</Trigger...
Marcosmarcotte asked 14/1, 2020 at 16:41
0
How to handle CSS @imports with Emotion? I have recently upgraded to version 11 and it emits following error:
`@import` rules can't be after other rules. Please put your `@import` rules before your...
4
Solved
I understand that styles can be conditionally rendered such as:
const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
display: ${({ centered }) => (centered ? "block" : "flex")};...
Aficionado asked 5/12, 2019 at 16:17
12
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 fi...
Hypercorrect asked 22/11, 2008 at 7:58
3
Solved
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 general...
1
I'm trying to replicate some CSS in Emotion using Partials but I don't see how it's possible to replicate a rule like :first-of-type in a situation where I'm using a partial. Is there some way to a...
Contusion asked 17/10, 2019 at 23:10
1
I have a situation the JSS styles of my MUI component library (Styles A) are superceding those provided by a consumer's website (Styles B).
Styles A is intended to overwritable by Styles B.
Take ...
Felizio asked 28/11, 2018 at 1:48
1
Solved
Using Svelte, what I want to accomplish is being able to style my html using the css property of a post object I have.
I thought, no problem, just add a style tag to my svelte:head with {post.css...
0
I use Next.js with styled-jsx together with stylelint and everything goes well until when I start to use variables in styled-jsx because stylelint throw stylelint(CssSyntaxError) on those variables...
1
Solved
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 o...
Ries asked 29/7, 2019 at 16:19
1
Solved
I am just getting started with styled components and want to create variations for things like buttons, navbars, etc.
For instance, I'd like to create a dark version of a navbar (wherein the back...
Gerge asked 6/5, 2019 at 15:39
1
Solved
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 fo...
Subgroup asked 16/4, 2019 at 22:33
2
Solved
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 t...
Yeah asked 16/12, 2018 at 15:8
1 Next >
© 2022 - 2025 — McMap. All rights reserved.