Question

我的目标是在react中覆盖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

您可以在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>
      );
    }
};

Answer 2

使用：

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

而不是：

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

在React中覆盖css类

2 个答案: