Questions tagged [react-css-modules]
Do you have inquiries about react-css-modules, the innovative higher-order React component that simplifies CSS Modules integration?
material-ui: v4.8.2 react: v16.12.0 When using babel-plugin-react-css-modules with an rtl app, I initially tried to utilize the injectFirst option but encountered a warning message stating: Material-UI: you cannot use the jss and injectFirst props at th ...
Trying to create this design: But currently stuck with this layout: I'm puzzled on how to resize the input field with an icon on the right while using col-md-12... Check out my code below: .form { margin-top: 8px; margin-left: 13px; displ ...
An error related to style is appearing: <Button style = No overload matches this call. Overload 1 of 3, '(props: { href : string; } & { children?: React Node; classes?: Partial<Button Classes> | undefined; color?: "primary" | ...
I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...
Currently utilizing CSS modules within a create-react-app project and encountering an error within Google Chrome browser: https://i.stack.imgur.com/0ItNM.png However, the error appears to be related to eslint because I am able to close the warning modal i ...
I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...
Would it be feasible to utilize a props variable as a css-modules className in React? // Card.js import styles from "./Card.module.scss" const Card = ({ theme }) => <div className={`${styles.card} ${styles[theme]}`> Card Co ...
Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...
Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...
How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example: .h1 { font-size: 3rem; /* more styles */ } .h2 { ...
I have been developing a web application using React/Redux and CSS Modules. To mock my CSS imports for unit tests, I am utilizing identity-obj-proxy. But now the QA team is inquiring about how to handle the obfuscated class names when it comes to using Se ...
I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...
Having trouble changing colors and CSS in the TAB PANEL using material-ui. Any tips or suggestions? :( It seems like useStyle and theme functions are not working as expected. I was able to modify other properties like scrollable, but colors seem to be fix ...
I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...
I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...
Currently, I am enhancing an existing React app that utilizes @mui/material components. The SCSS modules are linked to my JavaScript components, and I import them along with the material components like this. // STYLE IMPORT import styles from "./logi ...
Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...
In the midst of my NextJs project, I have encountered two different methods for importing CSS classes from a .module.scss file. Method 1: import * as styles from './page.module.scss'; Classes are used like this: <div className={styles.myCla ...
Within one of my tsx files, I included this line: import styles from "../../styles/buyTicket.module.css"; This resulted in the following error message: ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/ ...