リアクションでのCSSクラスのオーバーライド

Question

私の目標はリアクションのCSSクラスをオーバーライドすることです。すでに定義されているクラスには、cssフレームワークのプロパティがあります。私はそのプロパティを保存し、独自の新しいプロパティを追加したいと思います。

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

サス：

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

Answer 1

使用：

を

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

の代わり：

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

Answer 2

あなたがこれを行うにはreactjsにインラインスタイルを使用することができます -

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