Question

有新反应。我使用了create react应用https://github.com/facebook/create-react-app 开始一个新的React项目。

完整代码在这里。 https://github.com/bryandellinger/reactswitch/tree/master/src

我正在尝试更改所选元素的背景色，并使文本变为粗体，但似乎从未添加该类，不确定我在做什么错。

Switch.js

import React, { PropTypes } from 'react';
import  styles from './Switch.css';

const CREDITCARD = 'Creditcard';
const BTC = 'Bitcoin';


const Choice = function (props) {
  const cssClasses = [];

  if (props.active) {
    // <-- check props, not state
    cssClasses.push(styles.active);
  }

  return (
    <div
      onClick={props.onClick}
      className={cssClasses}
    >
      {props.label} {/* <-- allow any label */}
    </div>
  );
};

class Switch extends React.Component {
  state = {
    payMethod: BTC,
  };

  select = (choice) => {
    return (evt) => {
      this.setState({
        payMethod: choice,
      });
    };
  };

  render() {
    return (
      <div className='switch'>
        <Choice
          onClick={this.select(CREDITCARD)}
          active={this.state.payMethod === CREDITCARD}
          label='Pay with Creditcard'
        />

        <Choice
          onClick={this.select(BTC)}
          active={this.state.payMethod === BTC}
          label='Pay with Bitcoin'
        />

        Paying with: {this.state.payMethod}
      </div>
    );
  }
}

export default Switch;

和Switch.css

.active {
    background-color: #4619eb;
    font-weight: bold; 
  }

它显示switch.css中的活动类永远不会添加到onclick事件上。不知道我在想什么。

Answer 1

由于在CRA中配置了Webpack的方式，您需要这样编写CSS：

 :local(.active) {
    background-color: #4619eb;
    font-weight: bold; 
  }

Answer 2

CRA仅支持直接从盒子中导入整个CSS文件。因此，您可以执行以下操作，而不是将CSS文件作为组件导入：

import './Switch.css';

用于添加样式表的CRA文档：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet

此外，className属性应该是一个字符串，其类名之间用while空格分隔。如果要动态设置类名称，请签出类名称：https://github.com/JedWatson/classnames。

无法使用创建React应用在React中添加类

2 个答案: