CODEWITHSUNDEEP
javascripthtmlcssreactjssass
IntoTheDeep
IntoTheDeep

Reputation: 4118

Override css class in React

My target is to override css class in react. Already defined class has properties from css framework. I want to save that properties and to add some own new.

Html:

import styles from '../../css/style.scss';

export default class Class extends React.Component {

  constructor() {
    super();
  }

  render() {
    return (
      <div className="item">
        <div className="image">
          <img src="" />
        </div>
        <div className="content">
          <span className="header"><span>
        </div>
      </div>
      );
    }
};

Sass:

.item {
    .content {
        .header {
            text-transform: capitalize;
        }
    }
}

Upvotes: 0

Views: 10500

Answers (2)

IntoTheDeep
IntoTheDeep

Reputation: 4118

Use:

require("!style!css!sass!../../css/style.scss");

instead of:

import styles from '../../css/style.scss';

Upvotes: 0

Harkirat Saluja
Harkirat Saluja

Reputation: 8124

You can use inline styles in reactjs to do this:-

import styles from '../../css/style.scss';

export default class Class extends React.Component {

  constructor() {
    super();
  }

  render() {

   const styles={
        'textTransform': 'capitalize';
        //define other properties here, use camel case(remember we are using Javascript)
    }

    return (
      <div className="item">
        <div className="image">
          <img src="" />
        </div>
        <div className="content">
          <span className="header" style={style}><span>
        </div>
      </div>
      );
    }
};

Upvotes: 1

Related Questions