Ycon Ycon - 14 days ago 7
CSS Question

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 indivual element. I would like to change the colour of the font that is 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 am using a switch, which is splitting my elements up by their numbered
taglevel
. Applying custom CSS on the switch does not help.

Answer

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'
  }
});
Comments