Question

Let's i describe my problem:

I have a React component like below

import React from 'react';

class Question extends React.Component{
  render(){
    return <div className="view fourth-effect">  
      <a 
        href={this.props.link} 
        title="Full Image">
          <img src={this.props.image}/>
      </a>  
      <div className="mask"></div>  
      <span className='title'>{this.props.title}</span>
      <span className='owner'>{this.props.owner}</span>
    </div> 
  }
}

Question.propTypes = {
  title: React.PropTypes.string.isRequired,
  owner: React.PropTypes.string.isRequired,
  image: React.PropTypes.string.isRequired,
  link : React.PropTypes.string.isRequired
};

Question.defaultProps = {
  title: 'none',
  owner: '-',
  image: '-',
  link : '-'
};

export default Question

For styling i'm using css file. And now i'm interesting to use inline style with React, but i've stuck...

How i can apply two classes for an React element like i do in css

<div className="view fourth-effect">

just using JS object it should be something like this...

<div style={Style.question}> /*JS style object*/

How to combine two classes using inline style in React?

Thanks in advance!

Answer 1

The style attribute also accepts an array. So you can do:

<div style={[Style.question, Style.new]}>

JavaScript style, how to apply two classes

1 个答案: