Customizing external elements with React's inline styling feature

Question

Customizing external elements with React's inline styling feature

Trying to use React to style elements generated by a third-party library has been a challenge. In the snippet below, I was able to achieve the desired styling using CSS, but now I am looking to accomplish the same using JavaScript. This way, users can define their own custom color schemes.

.ThirdPartyDiv {
  color: red;
}

<div class="MyDiv">
  <div class="ThirdPartyDiv">
    Some Content
  </div>
</div>

When I say "user defined," I mean that users will specify values for color1, color2, color3, etc. These values will be saved in a database. Then, when the site loads on a given page, we can retrieve this information and create a stylesheet based on it.

javascript css reactjs

Answer 1

Answer №1

To implement conditional CSS, you can utilize vanilla JavaScript. Simply create a style element and add a CSS rule. Here's an example:

const userColor = "blue" //Retrieve from database

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

style.sheet.insertRule(".CustomDiv { color:"+userColor+"; }", 0);

This will add a style element to your webpage. Make sure to load the file when initializing your application.

UPDATE: documentation - https://developer.mozilla.org/en/docs/Web/API/CSSStyleSheet/insertRule

Answer 2

To implement conditional CSS, you can utilize vanilla JavaScript. Simply create a style element and add a CSS rule. Here's an example:

const userColor = "blue" //Retrieve from database

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

style.sheet.insertRule(".CustomDiv { color:"+userColor+"; }", 0);

This will add a style element to your webpage. Make sure to load the file when initializing your application.

UPDATE: documentation - https://developer.mozilla.org/en/docs/Web/API/CSSStyleSheet/insertRule

Customizing external elements with React's inline styling feature

Answer №1

Similar questions

What is the solution to prevent the div tag from being empty within Jquery UI Tabs?

AngularJS Time Range Selector: A Slider Solution

HTML Brickwork Picture Arrangement

Trouble with jQuery addClass function when trying to add to a specific object variable

Unusual gaps of white space appearing between React components

Utilizing a window.onload function in Microsoft Edge

Having trouble getting the edits in my SCSS file to reflect in the HTML

WP How can I modify a particular thumbnail size with a custom CSS class?

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Utilize Symfony filtering alongside AJAX functionality with the added feature of the KnpPaginatorBundle

The Ajax request fails to send the form files

The Node.js timestamp is later than the current date of the client

The task "gulp js src - duplication and implementation of base" involves duplicating

Is it possible to save a JavaScript interval in a jQuery element's data property?

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

What is the best way to trigger an action in response to changes in state within Vuex

Incorporating the parent object into a nested JavaScript function

Unable to navigate to the frame within the Salesforce Lightning interface

Ensuring the input field and button are positioned in a horizontal line