Questions tagged [css-in-js]
Inquiries regarding the integration of CSS within JavaScript using frameworks like styled-components or emotion.
Currently, I'm immersed in a project using Next.js and styling it with CSS in JS (ReactJSS). Upon inspecting the page source, I noticed that there are over 4000 lines of CSS for a single page, which is not ideal for performance. To provide context, let's ...
Can you provide guidance on using conditional styles with conditional operators? What would be the ideal code example? Is it possible to use non-CSS values? margin: isOpen ? '10px' : undefined margin: isOpen ? '10px' : 'initial&a ...
Currently, my project involves using Typescript and React in conjunction with Material-UI. Specifically, I am utilizing Material-UI's styling solution, which implements CSS in JS methodology in a Hook-like manner as outlined in their documentation: const u ...
I've been given the task of optimizing the loading speed of a page in our react redux web app. When the page load action is triggered, there seems to be a slight freeze lasting about half a second. After checking the profiler, everything seems fine ...
I'm excited to start using the Linaria library in my NextJS project. I followed the documentation, but encountered an error. The error message states: Global CSS cannot be imported from files other than your Custom . Please move all global CSS impo ...
My goal is to change the background color on dropdown elements while keeping the default text visible. Currently, if I don't explicitly set a background color on the Select component, the text specified in the InputLabel displays correctly. However, o ...
I am encountering a frustrating issue that seems to defy the essence of CSS in JS. The problem arises when I use styled-components and attempt to apply a classname that is already used higher up in the React component tree within a styled component. Surpri ...
Looking for a way to customize the appearance of tab indicators using Emotion styled components. I'm struggling to target nested classes in my code. Here's what I have so far: const StyledTabs = styled(Tabs)( { classes: { indicator: ...
I've spent hours searching on Google, but I haven't been able to find a solution. Below is the code for my Navbar component: import React from "react"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from " ...
After upgrading from Mui 4 to 5, I am facing a challenge in using class names effectively. While the SX property allows me to apply styles to individual components, I am struggling with applying the same class to multiple components. In version 4, my code ...
Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...
As I delve into my new project, incorporating StyleX has proven to be a bit challenging especially when working with NextJS. I find myself grappling with configuring the "next.config.js" file without causing conflicts with the existing "babel.config.js" f ...
We are currently implementing a variety of custom fonts with different weights for various purposes. With our entire stack now using Material UI with JSS theming and styling, we aim to eliminate the remaining .scss files in our folder structure. All the f ...
Incorporating a button component with material design using styled-components is my current task. This component will possess various props including size, icon, floating, etc. However, managing the numerous combinations of props has become quite overwhel ...
I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...
Is there a way to use material ui withStyles component in order to show information only on hover for a specific div? ...
I've implemented Kuma.js as my CSS in JS solution for Next JS 13. I'm currently working on styling a Header component called HeaderWrapper using Kuma. Below is the code snippet: import { styled } from "@kuma-ui/core"; const HeaderWrapp ...