CODEWITHSUNDEEP
javascriptcssreactjs
Ycon
Ycon

Reputation: 1950

Apply CSS style to individual element

I would like to change the CSS on an individual element in React. Not on the class itself, but simply on an individual element. I would like to change the colour of the font that is being displayed.

I realise this won't work, but I want it to work like this:

<style='display: {this.props.tag.colour}'> </style>

Here is the element which returns the class I want to change:

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
    this.state.isClicked && className.push('');
    return React.createElement(
      this.props.buttonElement,
      { className, onClick: this.onClick },
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

The full code is here.

As you can see, I'm using a switch, which is splitting the elements up by their numbered taglevel. Applying custom CSS on the switch does not help.

Upvotes: 2

Views: 120

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1073998

Since you're styling just a single element, you can use style, which in React you express as an object (rather than as a string):

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
   this.state.isClicked && className.push('');
   let elementProps = { className, onClick: this.onClick };    // ***
   if (weWantToUseTheColor) {                                  // ***
       elementProps.style = { color: this.props.tag.colour };  // ***
   }                                                           // ***
   return React.createElement(
      this.props.buttonElement,
      elementProps,                                            // ***
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

Or if you prefer things more inline:

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
   this.state.isClicked && className.push('');
   return React.createElement(
      this.props.buttonElement,
      {                                                                      // ***
        className,                                                           // ***
        onClick: this.onClick,                                               // ***
        style: weWantToUseTheColor ? { color: this.props.tag.colour } : null // ***
      },                                                                     // ***
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

Upvotes: 2

Related Questions