javascript - 在 React 中覆盖 css 类

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