What is the best way to send JSON data to Sass in ReactJS?

In my current project, I am developing a React/Redux application with Webpack that showcases UI components and enables users to adjust the colors of those components. The styling is being done using CSS Modules with scss. My preference is to keep all the styling within the scss files rather than using any inline styles with JS. I am exploring ways to pass properties from the React component into the corresponding scss file.

For instance, I am retrieving the button color from the React props. Now, I am seeking a method to convert that into a Sass variable and inject it into the scss file. Is there a way to achieve this?

Answer №1

I believe that the most effective choice would be to utilize react-css-themr. This tool allows you to apply class names based on user selection, or in your specific scenario, you can leverage the context-theming to select the appropriate scss for your component.

The react-toolbox project utilizes this method to theme material components, providing a great example for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the React Navigation header based on the screen displayed

I am working with a StackNavigation and I want to have a default Header (component Header) that will be applied to the "deep pages". These deep pages should show the default header generated for the React Navigation. In my index page **Index**, I only wan ...

Looping through JSON data using jQuery's for loop

I am attempting to create a for loop in order to condense and simplify the code. The goal is to have a loop that runs 5 times, incrementing the value by +1 each time for the (filmi.Movies[0].Title). var i = (filmi.Movies[0].Title); for(i=0; i<5; i++){ ...

Adaptable Image Functionality in Jquery Carousel

I've encountered an issue with my images within a jquery slider. While the slider itself is functioning properly, I am facing a couple of challenges. Initially, I aimed to make the images responsive, but upon removing the height property, the content ...

Exploring the seamless integration of Material UI with React version 18

I am having an issue with my background not turning black in React version 18.2.0 when using makeStyles from Material UI version 4. Despite no errors in the code, the background remains unchanged. How can I fix this problem? import './App.css'; i ...

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

Unable to locate the MoreVert icon in Material UI interface

I am trying to incorporate the MoreVert icon into my application's header to display signout and settings options. I have added the MoreVert icon as shown below, and although the popup appears when clicking on the supposed location of the icon, I am u ...

Error Encountered: React - Material UI | Unable to locate the module: 'material-ui/Button'

Currently, I am utilizing a Material UI button in my React application page. import Button from 'material-ui/Button' <Button color="primary" variant="raised"> Group </Button> The following packages have ...

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

Display additional information in a sidebar when hovering over it

I stumbled upon a sidebar code that caught my interest: #sidebar { position: fixed; z-index: 10; left: 0; top: 0; height: 100%; width: 60px; background: #fff; border-right: 1px solid #ddd; text-align: center; } #sidebar a { text-d ...

NextJS was throwing a warning at me, while Firebase hosting was giving me an error regarding the absence of unique keys for children in lists, even though I

I've been troubleshooting this warning for quite some time, but I can't seem to resolve it. The warning reads as follows: Warning: Each child in a list should have a unique "key" prop. Check the top-level render call using <ul>. ...

Is the useEffect hook executed twice in a production environment?

I'm facing a straightforward question here. I know that during development, running a code twice can help identify bugs faster. However, now I'm wondering if there's something I should configure to prevent this from happening in production w ...

Utilize background-size:cover and incorporate text in a horizontally scrolling webpage

Struggling to create a minimalist HTML layout with a horizontal scrollbar, featuring a large image on the left and a lengthy text with columns on the right? I suspect the issue lies in the implementation of position:relative with float, as well as position ...

Troubleshooting a React app deployment on Heroku: Dealing with the JS heap overflow

Seeking Solution: I have been facing a challenge while trying to deploy my React application on Heroku. Despite successful build and deployment, the app crashes immediately upon startup. Upon investigation, I suspect that the issue may be related to the s ...

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

Can a font size be adjusted dynamically based on the width of its containing class?

I have encountered this issue before, but the previous solution did not work for me. I am now seeking a viable alternative. Currently, I am developing a website and have an event announcement block that needs to display the event date spanning the entire ...

Designing REST APIs: utilizing GET for intricate queries

I'm currently in the process of creating a REST call that will provide location information (latitude/longitude) based on a user's context and configuration. Given the high number of user properties and their nested structure, I'm unsure ab ...

Enhancing Material UI DataGrid row using Dialog Popup for updating with Edit-Form in Material UI version 5

I am seeking a solution for updating a row in a Material UI DataGrid table using a Dialog Popup with an Edit-Form that opens when the Edit Button of a row is clicked, instead of inline Row-Editing. How can this be achieved without any examples or document ...

Internet Explorer experiences performance issues when a table containing over 500 rows is being utilized

Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...

Steps to successfully set up a React application without encountering any installation errors

Hey everyone, I've been trying to install React on my system for the past two days but keep encountering errors. Initially, I used the commands below to install the React app and it worked smoothly: 1. npm install -g create-react-app 2. create-react- ...

Should I use NPM or Yarn? What is the recommended approach for initiating React Native projects and handling dependencies?

Starting a new React Native project can be done by using yarn, which creates a yarn.lock file. This will set up the project like this: react-native init myProjectName However, many common libraries assume that NPM is being used, such as this one: npm in ...