What is the best way to show a CSS class on the user's side in our React app?

Question

What is the best way to show a CSS class on the user's side in our React app?

To showcase the styling I have used, how can I pass the CSS class where my styles are defined in a React component? The JavaScript file and CSS file are separate entities with styles written in the CSS file.

.SideBar{
    border: 1px solid black;
    height: 700px;
    background-color: silver;
    margin-top: 5px;
}

Now, I want this class to reflect on the user interface. What should I include in the JS portion? import classes from './Project.module.css';

The styling properties function correctly on the JSX element but I desire for the user to be able to view these properties. How can I achieve this in JSX?

Expected Output :- On UI

.SideBar{
    border: 1px solid black;
    height: 700px;
    background-color: silver;
    margin-top: 5px;
}

What steps should I take?

javascript css reactjs

Answer 1

Answer №1

You have the option to include the style directly within a style tag in the component code, allowing you to showcase the styling to the user.

To see how this is done, refer to this guide on writing the style tag within the render function:

If you're interested in displaying the style tag itself, check out this resource: https://css-tricks.com/show-and-edit-style-element/.

Just like this example:

class App extends React.Component {
  render() {
    return (
    <div className="App">
      <h1>Show me your style!</h1>
      
      <style dangerouslySetInnerHTML={{__html: `
      body style { 
        display: block; 
      }
      h1 { 
        color: blue;
       }
    `}} />
    </div>
  );
  }
}

While it may not be the prettiest solution, it can be effective for your needs.

Best of luck with your styling endeavors!

Answer 2

You have the option to include the style directly within a style tag in the component code, allowing you to showcase the styling to the user.

To see how this is done, refer to this guide on writing the style tag within the render function:

If you're interested in displaying the style tag itself, check out this resource: https://css-tricks.com/show-and-edit-style-element/.

Just like this example:

class App extends React.Component {
  render() {
    return (
    <div className="App">
      <h1>Show me your style!</h1>
      
      <style dangerouslySetInnerHTML={{__html: `
      body style { 
        display: block; 
      }
      h1 { 
        color: blue;
       }
    `}} />
    </div>
  );
  }
}

While it may not be the prettiest solution, it can be effective for your needs.

Best of luck with your styling endeavors!

Answer 3

Answer №2

When working with React, you will need to utilize the className attribute in your JavaScript file in order to apply CSS styles.

For example:

CSS file:

.menu {
background-color: coral;
}

JS File:

Begin by importing your CSS file into the JS file

render() {
  return <span className="menu">Menu</span>
}

By following this structure, you can effectively incorporate CSS styling within your JS file.

Answer 4

When working with React, you will need to utilize the className attribute in your JavaScript file in order to apply CSS styles.

For example:

CSS file:

.menu {
background-color: coral;
}

JS File:

Begin by importing your CSS file into the JS file

render() {
  return <span className="menu">Menu</span>
}

By following this structure, you can effectively incorporate CSS styling within your JS file.

Answer 5

Answer №3

How about this?

console.clear();
{


  function getStyle(className) {
    "use strict";
    className = className.replace('.', '\.');
    var styles = Array.from(document.styleSheets).reduce((carry, sheet) => {
      var rules;
      try { // CORS
        rules = sheet.rules || sheet.cssRules;
      } catch (e) {
        return carry;
      }
      if (!rules) { return carry }
      
      rules = Array.from(rules).reduce((carry, rule) => {
      
        if (rule.selectorText && rule.selectorText.match(className)) {
          carry.push(rule.cssText || rule.style.cssText);
        }
        return carry;
      }, []);
      if (rules.length) {
        carry.push(rules)
      }
      return carry;
    }, [])
    return styles[0];
  }

  function getElementsWithClasses() {
    return Array.from(document.querySelectorAll('[class]'));
  }

  function over(el) {
    var display = document.getElementById('display-fsadhkfjdfkds');
    if (!display) {
      display = document.createElement('div')
      display.setAttribute('id', 'display-fsadhkfjdfkds');
      document.body.append(display);
    }
    display.innerHTML = "";
    var html = Array.from(el.classList).reduce((carry, cl) => {carry += getStyle(`.${cl}`); return carry}, "");
    display.innerHTML = html;
  }
  function out(el) {
    var display = document.getElementById('display-fsadhkfjdfkds');
      if (display) {
        display.remove()
      }
  }
                                     
  var elems = getElementsWithClasses()
  
  
  window.addEventListener('mouseover', e => {
    if(e.target.classList.length) {
      over(e.target)
    }
  })
  document.addEventListener('mouseout', e => {
    if(e.target.classList.length) {
      out(e.target)
    }
  })
}

.abra, .ca {
  background-color: lightgray;
}
.abra {
  color: pink;
}
.dabra {
  color: blue;
}
.not-used {
  padding: 200px;
}
.date {
  padding: 20px;  
}

[class]:hover {
  background-color: lightgray;
  box-shadow: 0px 0px 5px 1px #800000;
}

#display-fsadhkfjdfkds {
  position: fixed;
  bottom: 5px;
  right: 5px;
  width: calc(25vw - 2 * 5px);
  height: calc(50vh - 2 * 5px);
  border-radius: 10px;
  background-color: cornsilk;
  border: 1px solid darkgreen;
  box-sizing: border-box;
  padding: 10px;
}

html, body {
  min-height: 100vh;
  min-width: 100vw;
}

<code class="abra ca dabra" data-do-it="dont">No code</code>
<div class="extra">
  Extra
</div>
<span>No class</span>
<table>
  <tr>
    <td class="date"><time class="year" style="color: red">2020</time></td>
    <td>Event 1</td>
  </tr>
</table>

New

What do you think of incorporating CSS and the :after pseudo element with a class attribute as content?

*[class]:after {
  content: "." attr(class);
  color: gray;
  font-size: .75em;
  vertical-align: super;
}

<div class="dig"><span>No</span> <span class="spa">questions</span> <span>asked</span></div>

Answer 6

How about this?

console.clear();
{


  function getStyle(className) {
    "use strict";
    className = className.replace('.', '\.');
    var styles = Array.from(document.styleSheets).reduce((carry, sheet) => {
      var rules;
      try { // CORS
        rules = sheet.rules || sheet.cssRules;
      } catch (e) {
        return carry;
      }
      if (!rules) { return carry }
      
      rules = Array.from(rules).reduce((carry, rule) => {
      
        if (rule.selectorText && rule.selectorText.match(className)) {
          carry.push(rule.cssText || rule.style.cssText);
        }
        return carry;
      }, []);
      if (rules.length) {
        carry.push(rules)
      }
      return carry;
    }, [])
    return styles[0];
  }

  function getElementsWithClasses() {
    return Array.from(document.querySelectorAll('[class]'));
  }

  function over(el) {
    var display = document.getElementById('display-fsadhkfjdfkds');
    if (!display) {
      display = document.createElement('div')
      display.setAttribute('id', 'display-fsadhkfjdfkds');
      document.body.append(display);
    }
    display.innerHTML = "";
    var html = Array.from(el.classList).reduce((carry, cl) => {carry += getStyle(`.${cl}`); return carry}, "");
    display.innerHTML = html;
  }
  function out(el) {
    var display = document.getElementById('display-fsadhkfjdfkds');
      if (display) {
        display.remove()
      }
  }
                                     
  var elems = getElementsWithClasses()
  
  
  window.addEventListener('mouseover', e => {
    if(e.target.classList.length) {
      over(e.target)
    }
  })
  document.addEventListener('mouseout', e => {
    if(e.target.classList.length) {
      out(e.target)
    }
  })
}

.abra, .ca {
  background-color: lightgray;
}
.abra {
  color: pink;
}
.dabra {
  color: blue;
}
.not-used {
  padding: 200px;
}
.date {
  padding: 20px;  
}

[class]:hover {
  background-color: lightgray;
  box-shadow: 0px 0px 5px 1px #800000;
}

#display-fsadhkfjdfkds {
  position: fixed;
  bottom: 5px;
  right: 5px;
  width: calc(25vw - 2 * 5px);
  height: calc(50vh - 2 * 5px);
  border-radius: 10px;
  background-color: cornsilk;
  border: 1px solid darkgreen;
  box-sizing: border-box;
  padding: 10px;
}

html, body {
  min-height: 100vh;
  min-width: 100vw;
}

<code class="abra ca dabra" data-do-it="dont">No code</code>
<div class="extra">
  Extra
</div>
<span>No class</span>
<table>
  <tr>
    <td class="date"><time class="year" style="color: red">2020</time></td>
    <td>Event 1</td>
  </tr>
</table>

New

What do you think of incorporating CSS and the :after pseudo element with a class attribute as content?

*[class]:after {
  content: "." attr(class);
  color: gray;
  font-size: .75em;
  vertical-align: super;
}

<div class="dig"><span>No</span> <span class="spa">questions</span> <span>asked</span></div>

What is the best way to show a CSS class on the user's side in our React app?

Answer №1

Answer №2

Answer №3

New

Similar questions

Setting a radio button to be checked in AngularJS using stored data

Using Vue to display a Div inside a TD element of a table does not result in a reactive behavior

Modify the input class once an image has been chosen (But not yet submitted)

When data is submitted through the POST method, it mysteriously disappears

Can onerror be triggered on an HTML Image onload event?

What is the best way to duplicate a text using a button in ReactJS?

Ninja Flip ComboButton

Strategies for avoiding JavaScript and Flash navigateToURL attacks

It appears that my React component is not being rerendered even after using componentDidMount and setState to update it

Attempting to pass an asynchronous initial state to the useReducer method is resulting in an undefined return value

Unlock AngularJS expression through ng-click functionality

Styling CSS for circular buttons

The functionality of saving a file using the jsPDF method is not functioning properly

Enabling communication between App.js and a separate class in React

Leveraging the power of $lookup and $mergeObjects in aggregation

JQuery Form Wizard - Adding a Finish Button Linked to a Page

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

Guide to creating a navigation bar that expands when you expand navigation items

Tips for troubleshooting the error message "is not a function" in a React application

Retrieving column values from a Datatable is limited to the first 10 rows