CODEWITHSUNDEEP
cssreactjs
David Dennis
David Dennis

Reputation: 722

using className in react

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?

Upvotes: 3

Views: 28284

Answers (3)

Miodrag Trajanovic
Miodrag Trajanovic

Reputation: 134

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.

Upvotes: 0

reisdev
reisdev

Reputation: 3403

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>

Upvotes: 2

RLoniello
RLoniello

Reputation: 2329

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.

Upvotes: 2

Related Questions