Überschreiben CSS-Klasse in React

Question

Mein Ziel ist es, CSS-Klasse in reagieren zu überschreiben. Die bereits definierte Klasse hat Eigenschaften von css framework. Ich möchte diese Eigenschaften speichern und einige eigene neue hinzufügen.

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

Answer 1

Verwendung:

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

statt:

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

Answer 2

Sie Inline-Styles in reactjs verwenden können, dies zu tun: -

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