222 questions
1
vote
1
answer
71
views
Border color defined via sx prop shows correctly in DevTools but not on the rendered site
I'm developing a web application using React and Next.js, and I'm using Material UI for my UI components. I have a component that renders a Material UI Card with custom styles via the sx prop. In my ...
- 11
3
votes
0
answers
99
views
Styling Fluent UI checkboxes within a dropdown
I need to style a fluent UI checkbox using the style props. However based on the documentation it is unclear how to style the checkbox differently in its checked vs unchecked state. I am able to set ...
0
votes
0
answers
55
views
CSS linear-easing-function bug
Edit: add full html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" ...
- 33
0
votes
1
answer
404
views
How to select hardcoded CSS class with Vanilla Extract?
I’m migrating from Emotion to Vanilla Extract. I have a component which contains a third-party UI library component. This third-party component has a hardcoded class .ClassWhichICannotChange.
In ...
- 1,656
1
vote
1
answer
1k
views
"Failed to Fetch Font Resource from Google Fonts"
The request to fetch the font file from the specified URL failed multiple times.
Specific URL: https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2 and https://...
1
vote
1
answer
124
views
justify text in react native, but last line be rtl
I've some Arabic text in react native, and I want to make it justify (fill the width from both sides), but the last line be right aligned.
When I set textAlign: "justify" style for <Text&...
- 147
-1
votes
1
answer
132
views
How to set CSS style of elements dynamically through backend? (user customization panel to change style of other webpages) [closed]
let's say we have a website with multiple pages and also a page for user account. the user has a setting in his panel to change the color/fontsize/style etc of certain parts in other pages of website ...
4
votes
1
answer
2k
views
How to use material-ui styled components inside Next.js server components
I'm using Next.js version 14 with app router alongside with Material-UI v5.
Whenever I'm rendering Material-UI components in server pages components It's working just fine. The issue starts when I'm ...
- 1,173
0
votes
2
answers
136
views
CSS properties with conditional styles and falsy values
I'm looking for the answer to the question how should I use styles with conditional operators.
What code example would be the best? Can we use non-CSS values such as undefined, null, false, etc.?
...
- 850
0
votes
1
answer
54
views
Css properties as falsie values in react
I'm looking for the answer to the question how should I use conditional styles with conditional operators.
What code example would be the best? Can we use non css values?
margin: isOpen ? '10px' : ...
- 850
8
votes
0
answers
2k
views
integrating emotion/css with nextjs app router
I have been using emotion/css for my project and want to migrate to nextjs app router but have some questions regarding emotion/css server side rendering with app router.
Nextjs documentation states ...
- 81
0
votes
1
answer
322
views
How to style body in StyleX?
In StyleX, how to style a body?
The body element that stays outside any React component, is usually styled using useEffect, but I can't figure out how to actually use that in StyleX.
There's nothing ...
- 34.9k
2
votes
1
answer
110
views
Extract CSS from Lit tagged templates
We are in a situation where we have to ship some of the global styles written with Lit tagged templates as plain css files.
Basically converting the following:
// global.ts
import { css, unsafeCSS } ...
- 301
0
votes
0
answers
50
views
ReactJS: CSS in JS Dynamic Values/Theming Slows render
I'm using CSS-in-JS (via JSS) in our application and we're having issues with render speeds when using dynamic values in our styles. I initially decided to use JSS because of the ability to pass in ...
0
votes
2
answers
1k
views
What is the correct way to configure CSP in Tauri when using CSS-in-JS libraries?
In the release build, Tauri does not render anything. After a bit of Googling, I found the same issue, but I am still confused about the right CSP configuration to set when using CSS-in-JS libraries ...
- 483
1
vote
1
answer
254
views
I'm trying to apply the first 4 things to new project
I tried applying StyleX to vite.
So, I installed and applied the library called "vite-plugin-stylex": "^0.4.1".
vite.config.ts
import { defineConfig } from "vite"
import ...
- 39
-1
votes
3
answers
827
views
How to install StyleX in a new React project
I want to use StyleX in my new project, but I'm having some trouble trying to use it (with NextJS).
I don't understand how to configure the "next.config.js" file (creating a "babel....
- 13
-1
votes
1
answer
95
views
@import not showing Fontawesome icons in CSS-in-JS
This was how I was importing Fontawesome icons:
src/App.css
@import "@fortawesome/fontawesome-free/css/all.css";`
When I moved that @import to CSS-in-Js (emotion):
src/App.js
// JS:
const ...
- 55.7k
0
votes
0
answers
77
views
CSS: Preventing Tooltip Position Drift on Window Resize for Dynamic Width Parent Element
I am working with a CSS layout where I have a tooltip element positioned above a dynamic width container (RateChart). Inside this container, there is a PercentMemory element represented by a thin ...
1
vote
1
answer
1k
views
How to format css-in-js styles order using stylelint?
I am using styled-components, prettier and stylelint. Here is my .stylelintrc.json:
{
"extends": [
"stylelint-config-standard",
"stylelint-prettier",
"...
- 246
1
vote
0
answers
90
views
ComponentProps in xstyled components
import { x } from "@xstyled/styled-components";
import React, { ComponentProps } from "react"
type WrongProps = ComponentProps<typeof x.div>;
const App = () => {
...
- 48
1
vote
0
answers
129
views
How to load and apply a 3rd-party stylesheet into a NextJS component after CSS-in-JS globals?
I've got a problem with the loading order in a NextJS app.
We use Stitches CSS-in-JS, which provides globalCss() for loading global styles like resetters/normalizers and it gets invoked in _app.tsx.
...
- 2,618
0
votes
1
answer
141
views
Kuma CSS in JS library applies a class but with no effect
I'm using Kuma.js as my CSS in JS solution for Next JS 13. I'm trying to create a styled Header component using Kuma called HeaderWrapper. Here's my code:
import { styled } from "@kuma-ui/core&...
- 1,868
0
votes
1
answer
558
views
Migration from antd4 to antd5 less to css in js
In a complicated aplication that was built on antd4, that has many different less files 100+, upgrading to antd5 do I have to update all the files to be using cssinjs or can I keep the old less files ...
- 338
2
votes
2
answers
997
views
How to enable CSS intellisense in JSX files in VSCode
I just got a new work computer, and setting up the dev environment, I cannot seem to get my Intellisense to work while in a React.jsx file
I'm using CSS-in-JS with NextJs styled JSX https://github.com/...
- 2,062
6
votes
3
answers
5k
views
When reloading the page in Next.js, there is a delay in applying Antd CSS
The issue I am facing is that when I reload the page in Next.js while using Antd CSS, there is a delay in applying the CSS styles. In other words, the styles are not being applied immediately upon ...
- 61
0
votes
2
answers
59
views
How to remove duplicate code from array.map method? [closed]
I am having array of data which I am maping using .map method. How can I remove duplicate code i.e.
<a href={usp.url}>
<div>{usp.text}</div>
</a>
Code can be found on code ...
- 59
1
vote
1
answer
2k
views
How to style Fluent UI checkbox?
I need to style Fluent UI checkbox and change checkmark color while it is in indeterminate state.
I use Flueint UI 8.x.
"dependencies": {
"react": "16.8.6",
&...
- 283
0
votes
1
answer
296
views
how can I use @ rules in emotion?
I wanna use @Property in emotion ,but cannot find something about this in document
import styled from '@emotion/styled';
import React from 'react';
import demo from './demo_img.jpeg';
const ...
- 41
0
votes
1
answer
126
views
Getting problem in flowing images from left to right (i.e. 1,2,3,4...... more) using grid
Getting problem in flowing images from left to right using grid. Some images are not flowing from left to right as per number as shown in image (like 5th image should come before image 6. Same with ...
- 59
0
votes
1
answer
721
views
Antd styled component datepicker unable to override style
I am trying to override the style for the datapicker today and change the blue box around todays date to red.
Inspecting the element I find the class to override is the following:
:where(.css-dev-...
1
vote
1
answer
1k
views
Griffel - CSS in JS - Cannot overwrite child class rule on parent element hover
I'm using Griffel https://griffel.js.org/ for the first time and I am struggling to achieve this simple thing. By default this button is hidden and when the user hover's over the parent I want to ...
- 1,041
9
votes
2
answers
3k
views
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 { ...
- 111
2
votes
1
answer
297
views
use of :hover as a simplepseudos in csstype for typescript/react
I am using csstype in a react component library. I want to add a hover effect, which is supported through simple pseudos. Unfortunately I cannot find any example of this being used and I can't get it ...
1
vote
1
answer
406
views
How to change the styles of Base Web Button component on click?
I want to change the color and background color of the Base Web Button component on button click using React. How can I change the styles of the button on button click?
I tried to use $isSelected prop ...
- 74
12
votes
2
answers
4k
views
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 '...
- 479
2
votes
1
answer
2k
views
Nested components & styles in fluent ui v9 / Griffel
I have a style for a standard list
export const useOverrides = makeStyles({
list: {
...shorthands.padding("2px", "4px", "8px", "30px"),
},
I ...
- 1,043
2
votes
0
answers
129
views
How can I use emotion/styled in my react project on codepen?
I need to be able to use @emotion/styled CSS-in-JS library so I can pass props to the background-color and color properties of my Button component. The background-color and color of the buttons are ...
- 25
1
vote
0
answers
128
views
How to implement multiple class selectors like .a.b in Emotion?
I'm migrating some CSS to Emotion, some selectors are like .a.b {...}. What's the best way to use Emotion for this?
I've tried css`.${a}.${b}` but it doesn't work :(
- 73
0
votes
0
answers
233
views
How can I load CSS Modules with a *runtime* unique hash?
I have 2 micro frontends, which share the same component library. This creates specificity bugs, because it breaks the order of style definition. For example:
Suppose we have these styles:
.card { ...
- 513
5
votes
1
answer
2k
views
How can I get vscode intellisense to work when customizing css in material-ui component?
I was wondering if somebody could suggest a vscode extension that will allow intellisense to suggest css-in-js for customized material ui components in .tsx file. E.g. I would like intellisense to pop ...
- 81
1
vote
1
answer
282
views
React inline CSS style with fallback
Is this the correct way to apply fallback for width with vendor prefixes and finally percentage for browsers that don't support calc?
<React.Fragment>
<Container
style={{
...
- 7,961
2
votes
0
answers
227
views
CSS-in-JS parser for JavaScript/Typescript?
I'd like to parse CSS-in-JS (styled-components) which is written in my tsx file into an AST so I can change the hex color into the css variable name.
For example,
const Wrapper = styled.div`
...
1
vote
1
answer
3k
views
How to make an MUI 5 checkbox & label change color on hover?
I'd like to have a checkbox with a label in a wrapper. When the wrapper is hovered everything should change color. See the image:
Here is my code:
const styles = {formControlLabel:{
color:'#d7dae0',...
- 14.2k
0
votes
1
answer
569
views
How to add conditional props to style object in @emotion/react/Typescript?
I want to add props to control my css in emotion,but I don't know how to do
- 127
1
vote
1
answer
665
views
Sibling Selectors not working correctly with Emotion
I have the following code:
const CardContainer = styled(Flex)`
flex-direction: column;
padding: 12px;
width: 100%;
max-width: 450px;
height: auto;
border-radius: 32px;
overflow: hidden;
...
- 164
0
votes
1
answer
510
views
twin.macro preflight styles differ from tailwind preflight
According to my research and twin.examples repo for Next.js, twin.macro recommends adding their preflight component, which they name <GlobalStyles />. They often alias it to <BaseStyles /> ...
- 399
4
votes
1
answer
2k
views
default "css-" class names using MUI styled-components
I'm using Mui's styled components, and i've noticed it injects a class that starts with "css-"
and replaces the class name i've given to it in the code
I've tried to follow everything that ...
2
votes
1
answer
449
views
Serialize programmatic CSS style sheets (stylesheets that use CSSOM API)?
You can use document.documentElement.outerHTML in order to serialize a document to a HTML string.
However, if we paste the result into a file and try to render it as HTML, it will not be always be ...
- 8,659
1
vote
2
answers
1k
views
TS error using css "position" when passing style object to Emotion's css prop
I have a React component roughly with this structure:
// This does not work.
const style = {
position: 'absolute'
// ...other css props
}
const Component = () => {...
- 1,112