293 questions
0
votes
2
answers
94
views
CSS :root variables not updating in React + Vite project
I’m working on a React app for my college project (using React + Vite) and I recently tried changing my theme colors defined in :root. However, the new values are not reflected across my site — only ...
- 46
2
votes
1
answer
208
views
migrate from @apply directives when upgrading to Tailwind CSS v4?
I'm currently developing with React Vite Tailwind "tailwindcss": "^4.1.4" and css modules.
I decided to use @apply in my code, for example:
. editor {
@apply max-w-3xl mx-auto my-8 ...
1
vote
1
answer
40
views
React render data in table in two or 2 columns dynamically after data fetched from server
I want to display my table consecutively like the structure below.
+----------+----------+----------+----------+
| Row 1 | Row 7 |
+----------+----------+----------+--------...
- 33
0
votes
0
answers
46
views
CSS Modules: Why Are External Styles Not Overriding Base Styles?
I'm having trouble with CSS Modules in React when trying to override base styles with external ones. The styles passed via className don't seem to take precedence as expected.
Problem Description
I ...
- 21
1
vote
1
answer
2k
views
React, Mantine, CSS Modules Do Not Load Properly
I'm developing a React project with TypeScript and Mantine. I'm using CSS Modules for styling components. However, at seemingly random times, the CSS stops loading (as far as I can observe from ...
- 198
1
vote
1
answer
2k
views
Setup css modules with rspack using Nx monorepo and react
I'm trying to setup Rspack inside a Nx monorepo that uses React, module federation, Typescript support and css modules using scss. I got almost everything done except for the last part. The css ...
- 157
-2
votes
2
answers
64
views
Having an issue to display background image with linear-gradient with css modules in Next 14
This css doesn't display background image
.header {
height: 85vh;
background-image: linear-gradient(
to right bottom,
rgba(var(--color-primary-light), 0.8),
rgba(var(--color-...
- 1,097
1
vote
1
answer
73
views
How can I set the table tr in css module (nested css)
I am using css module like this ,
.catTable{
border:1px black solid;
}
in jsx
import styles from "../css/basic-styles.module.css";
return (
<table className={styles.catTable}>
...
- 12.6k
0
votes
0
answers
96
views
CSS Modules aren't being loaded in any React Component
I am attempting to utilize CSS Modules for styling my components, however they do not see to be applied.
I've created my React App using Create-React-App, which includes React(18.2.0) and ReactScripts(...
- 3,296
2
votes
1
answer
1k
views
Unable to configure CSS Nesting properly with Tailwind CSS
<Slider
{...settings}
// style={{ cursor: "pointer", marginBottom: "10px" }}
className={`${classes.services__slider} cursor-pointer mb-10 md:mb:0`}
>
{...
0
votes
1
answer
375
views
Do CSS module class ID's stay constant?
CSS modules add ID's to the classes e.g. classUc8xi.
Since we want to target some elements with Cypress which uses some sort of QuerySelector, I want to know if these ID's ever change? Are they ...
- 989
0
votes
1
answer
39
views
button inside a div wont display it's relative text
I am working with ReactJS and I am creating a simple clickable button but here's the problem:
It wont show the written message on button when I place it inside a div.
Screenshot:
Code snippet:HTML
...
0
votes
1
answer
583
views
Why is css/ sass modules not working with third party library?
I wonder why my sass modules is not affected when I use third party component. In particular, I use react-horizontal-scrolling-menu
<ScrollMenu
selected={selected}
scrollToSelected={true}
...
- 633
0
votes
1
answer
73
views
Should i import css into a next page?
I want to ask if css can and should be imported into next pages.
is the page structure below acceptable, or what is the standard practice
/pages
/home
index.js
index.module.css
...
- 69
1
vote
1
answer
6k
views
How do I override the styles in ant-design 5?
I'm using React (create-react-app), ant design 5.3.0 and modular scss.
When using embedded components, their styles override mine, because the component creates a wrapper and my styles are hung from ...
- 57
0
votes
1
answer
181
views
I am importing a variable file in every sass module would it affect my css bundle size?
I am using sass mixed with sass modules to scope styles for each component
I found myself importing the variables file at every sass module
I import by the new "@use"
would that make my ...
- 3
1
vote
1
answer
781
views
React module.css add part of class name dynamically
I would like to add a part of a classname dynamicall with modules.css.
My classnames are arrow1, arrow2, arrow3, arrow4. So I would like to change the number at the end dynamically.
className={`${...
- 43
1
vote
1
answer
1k
views
React CSS module not putting in class names even though they exist
I have a React component where I'm trying to style a button for my web app. I've done this countless times with other components the exact same way. For some reason, the class names are not being used ...
- 1,880
1
vote
1
answer
1k
views
Reactjs, Bem naming nested structure with SCSSModule
We are using SCSS, SCSSModule and BEM naming methodology. I have researched the best structure for nested elements. I've seen different syntaxes and still have question mark in my head. I saw the ...
- 96
1
vote
1
answer
790
views
TS2307: Cannot find module './tables.module.css' or its corresponding type declarations
So I'm using css modules in create-react-app project, and for some reason I have this error:
in Google Chrome browser:
yet, it seems to be like eslint error, because in browser I can close warning ...
- 149
5
votes
2
answers
2k
views
CSS modules don't privatize element type selectors
I would like to make a CSS module index.module.css as follows which will be only used by App component :
.my-class {
color: red;
}
label {
color: blue;
}
In App.js I use import style from "....
- 5,770
2
votes
0
answers
759
views
Specific classes using CSS modules not working in React
I can't get CSS modules to work in Js - the plain global CSS module file is working, and so are non-specific classes like body are working, however I can't get classes.className to work for example.
I'...
- 29
0
votes
1
answer
647
views
How to apply css modules in dangerously set Inner html in react?
I have html stored in the database and I want to render it on my react page and for that I used
import low from "../css/low.module.css";
<div dangerouslySetInnerHTML={{__html: data}}/>
...
- 325
0
votes
0
answers
609
views
React - how to pass css modules className to a custom component
Is it possible to pass an isolated className to a custom component using CSS Modules, so I can use it inside this component?
<CustomComponent className={style.foo}/>
- 13
0
votes
1
answer
885
views
createGlobalStyle does not render children - React JS
Not displaying the output whenever trying on http://localhost:3000/
Not able to understand how to resolve this issue and print desired output
Expecting to print a black box on the browser since ...
1
vote
0
answers
175
views
Change body background using css modules
How do I change a single page background, using scss module and react.
I have this one page component using this;
body {
background: $black;
background: linear-gradient(
90deg,
$black 0%,
...
-1
votes
1
answer
268
views
How can I get rid of this TypeScript error.. This shows error in style of the button component
This is the Error shows in the style:
<Button style =
No overload matches this call.
Overload 1 of 3, '(props: { href : string; } & { children?: React Node; classes?: Partial<Button ...
2
votes
1
answer
2k
views
Best way to import .module.scss classes in react?
I'm working on a NextJs project and I've seen 2 ways of importing css classes from a .module.scss file.
Option 1:
import * as styles from './page.module.scss';
Classes used like this:
<div ...
- 71
1
vote
0
answers
69
views
Customize className seen in the DOM with react css modules
I was thinking, when I use react css modules I end up with visible class names like Form__module_bhj34 (something like this).
What is my goal, to get rid of the first and second part and end up jsut ...
- 11
0
votes
2
answers
1k
views
passing a dynamic class name as a prop in react
I am trying to make a modal toggle between visible and invisible by applying an invisible or visible class to the surrounding div of the component. In the App component I am using state to pass the ...
- 11
3
votes
1
answer
2k
views
CSS Modules in Nextjs: Target Html Tag from Local CSS File?
I want to apply smooth scrolling only to a very specific page in nextjs (say my blog). So I am not using my globals.css file, but I need a way to inject scroll-behavior: smooth; into the html tag for ...
- 7,845
5
votes
1
answer
4k
views
vscode can't regonize css nested syntax after using react-css-module with postcss-nested
I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so ...
- 1,001
0
votes
1
answer
2k
views
Removing Hash From React Css Modules
I can't seem to remove the custom hash on my class names generated by CSS Modules. I'm trying to adjust according to this thread, this medium, this stack overflow, and the web-pack documentation on ...
0
votes
0
answers
139
views
how to override style in css module?
here is an example:
Component.module.css
.container {...}
.content {...}
Component.tsx
import style from './Component.module.css'
function Component() {
return (
<div className={style....
- 121
1
vote
2
answers
3k
views
How do I use ternary operator for classnames with css modules?
I am facing some difficulty effecting a styling with the ternary operator in an element's className.
I created three buttons to render to a particular component when any of them are clicked, and I ...
- 13
2
votes
2
answers
2k
views
How to style React mdx rendered elements with CSS module?
I'm building blog with React where post files are .mdx and I'm using gatsby-plugin-mdx's MDXRenderer to render them as HTML. I'm styling with .module.scss but I can't use module inside rendered HTML ...
- 105
0
votes
1
answer
751
views
Updating CSS Module @Value with React
I am using CSS module along with react. I want to change the border-radius dynamically from react. In the box.css , i set the border-radius as radiusValue. My goal is to modify the value of ...
- 15
1
vote
0
answers
479
views
How to use css modules with react and keep styles in the same (.jsx) file?
I'd like to write my css modules in .jsx file. Similarly to styled-components. Here is an example of what I want to achieve (note that this is a single file):
// Cmp.jsx file
const styles = ???`
....
- 2,149
0
votes
2
answers
381
views
How to nest the class of parent component in child component?
I'm in a learning phase of react and I've been trying to nest style of parent in component in child component via class in react.js. How to do it?
What I've tried until now:
function Card(props) {
...
- 49
1
vote
1
answer
603
views
<React/tailwind> map object with z-index decrement / order of rendering
My Navigation bar code
import React, { useLayoutEffect, useState } from "react";
import { useQuery,useMutation } from "../../../convex/_generated";
import { Link } from "react-...
- 79
1
vote
1
answer
421
views
How to fix component position start on bottom then move to normal in react js when the page is refreshed
I have a component that has a sidebar and content as shown below.
When the page is refreshed, the first time the component content is loaded below as shown below and in an instant, the components are ...
- 137
1
vote
3
answers
269
views
Multiple React component className's
We have a React project where styles are written like this:
import styles from 'styles/sidebar.module.scss'
...
<div className={styles.sidebar}>Hello</div>
I can't figure how to include ...
- 3,047
1
vote
2
answers
1k
views
Inheritance In React Native Style Sheets
So in a regular cascading style sheet we can inherit from other styles doing so:
.myStyle .temp {
height: 100px,
width: 80px,
}
My question is:
is there a way for me to do this in react native. ...
- 43
12
votes
4
answers
24k
views
Selector ":root" is not pure (pure selectors must contain at least one local class or id) - NextJS with SASS modules
I've recently been switching to using modules in my next.js project, but I keep receiving this error in my newly created .module.scss files: "Selector ":root" is not pure (pure ...
- 583
0
votes
0
answers
430
views
Why is this CSS selector taking precedence over more specific selector?
I have this in my React app:
<Nav>
<BasicBtn>Basic button</BasicBtn>
<MainBtn>Main button</MainBtn>
</Nav>
The font size for buttons is set globally:
// ...
- 1,313
0
votes
0
answers
711
views
Class name composition with CssModules
i have some react components that compose css classes, using css modules, as shown in the following example:
import React from "react";
import style from "./button.module.css";
...
- 767
2
votes
1
answer
6k
views
Testing css-modules styles in testing library
A React Context provider imports style classes from a module.scss file.
When executing this component a selected style class is loaded and passed as the className to child components.
import React, {...
- 997
2
votes
0
answers
177
views
Use standard css class inside css module
i'm styling a React component with css modules.
there's a part where i insert html code using dangerouslySetInnerHTML
<div className={styles.article_text} dangerouslySetInnerHTML={{__html: props....
- 492
2
votes
0
answers
167
views
React import CSS file of react-image-gallery library in a CSS module file
since i want a unique CSS file for a specific component i decided to use CSS module file
but i noticed the import of CSS file of a library that im using called react-image-gallery doesn't work anymore
...
- 316
0
votes
1
answer
1k
views
How to access hidden CSS classes from CSS modules in React
I'm new to React. So I found out that there is a CSS mixing problem going on in my React code. So I used CSS modules to solve that problem. But when I'm doing a frontend React JS project with Bootsrap,...
