using className in react

Question

So what's the best pratice for using className in react. In specific multiple class names. I'm reading through the documentation and I don't really get a clear answer. I've seen things like:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

but is there a way for me to do something like this?

import React from 'react';
import ReactDOM from 'react-dom';
import './css/landing.css';
import './css/w3.css';


class Home extends React.Component {
  const homeClasses = 'bgimg-1 w3-display-container w3-opacity-min';

  render() {
    return (
      <div className={homeClasses}>
        <h1>SUP</h1>
      </div>
    );
  }
}


ReactDOM.render(
  <Home />,
  document.getElementById('root')
);

or even just list then out in the class name section?

If you want to import css in your javascript files, take a look at create-react-app — Christian Scott
– Christian Scott, Commented Jun 11, 2018 at 1:04

RLoniello · Accepted Answer · 2018-06-11 01:01:33Z

It depends what your component should/will do.

If your component is fairly static you will want to use a built in style like your first example:

const mystyle = {
width: '100%',
...
}

<div style={mystyle}>...</div>

However, there are better ways that allow your component to be more dynamic for re-use, for instance using a class method to generate the style from props passed to it, like in this render function:

render() {
// User's preference or Default Style:
const defaultStyle =  {
        width: this.props.style.width || '100%',
        height: this.props.style.height || '100%',
      }
//if this.props.className doesn't exist use mycssclass
const defaultClassName = this.props.className || 'mycssclass' 

return (
    <div className={defaultClassName} style={defaultStyle}>...</div> )

Following this logic you can use the ternary operator to change the css class name based on props. A common solution is use an isActive state property and use it to determine which class should be used.

render() {
const activeClassName = this.props.className + ' mycomponent-active'

return (
   <div className={this.props.isActive ? activeClassName : this.props.className} style={ this.props.style } 
   </div>);
}

Another common, but complex way to set your component's style is to use a function that will return a given style object, and use it like the first example.

Ultimately, you should decided whether you would like your component to be styled by the designer/user or should look the same no matter where it is used... if it is styled by the designer, just expose the CSS class name from props to the component or define a default:

<div className={this.props.className || 'someclassName'}>...</div>

otherwise, use an example above.

reisdev · Accepted Answer · 2018-06-11 01:27:43Z

Yes, you can do this! Take a look at the snippet below:

class Example extends React.Component {
  cssClasses = 'demo demo2';
  render() {
    return ( 
       <div className = { this.cssClasses }>
           Hello World 
       </div>
    );
  }
}

ReactDOM.render( <Example/> , document.getElementById('app'));

.demo {
  color: blue
}

.demo2 {
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

Your error was the definition of the homeClasses. You can't declare it like

const homeClasses = '...';

Because, on the way that you did, homeClasses is a property of your component. You should not use const. Just:

homeClasses = '...';

And you forgot to use the this reference, because the homeClasses is an attribute of your component.

<div className={this.homeClasses}>
   <h1>SUP</h1>
</div>

Miodrag Trajanovic · Accepted Answer · 2018-06-11 14:05:58Z

0

Exists and one away for this problem. You can use and read this data from file (example data.json) where can use this data like props of that.

answered Jun 11, 2018 at 14:05

Miodrag Trajanovic

1346 bronze badges

Collectives™ on Stack Overflow

using className in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related