Override css class in React

Question

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;
        }
    }
}

You are importing a scss file then showing "sass" ( that's scss syntax by the way). What are you usin to import, CSS modules? — ajmajmajma
– ajmajmajma, Commented Sep 21, 2016 at 22:28

Harkirat Saluja · Accepted Answer · 2016-09-22 08:58:46Z

1

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

answered Sep 22, 2016 at 8:58

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harkirat Saluja Over a year ago

for more details check out facebook.github.io/react/tips/inline-styles.html

IntoTheDeep Over a year ago

I want to use sass, not to set inline styles

IntoTheDeep · Accepted Answer · 2016-09-22 09:54:33Z

0

Use:

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

instead of:

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

answered Sep 22, 2016 at 9:54

IntoTheDeep

4,12715 gold badges46 silver badges87 bronze badges

Collectives™ on Stack Overflow

Override css class in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related