如何使用 react 访问 css/scss？答案

【问题标题】：How do I access css/scss with react?如何使用 react 访问 css/scss？
【发布时间】：2017-06-08 03:17:12
【问题描述】：

我有一个反应组件，我试图在单击 div 时更改 css 的背景颜色。

我知道你可以在组件中设置颜色，但是我多次使用这个组件，并且不要用不同的颜色制作多个组件文件，即使我这样做了，除了事实之外我很好奇.

我怎样才能通过组件访问（甚至是console.log来自己弄清楚）css文件及其属性？提前谢谢。

【问题讨论】：

标签： css reactjs sass

【解决方案1】：

如果您想在 .css/.scss 文件中保留所有背景颜色样式，则需要有一个好的 className 策略来将样式链接到您的组件。这是我的建议：

styles.scss

.blue {
  background-color: blue;

  &.clicked {
    background-color: red;
  }
}

Container.js

import React from 'react';
import ClickableDiv from './ClickableDiv.js';

const Container = () => (
  <ClickableDiv className="blue">
    <p>This is my text.</p>
  </ClickableDiv>
);

export default Container;

ClickableDiv.js

import React, { Component } from 'react';

class ClickableDiv extends Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleDivClick = this.handleDivClick.bind(this);
  }

  handleDivClick() {
    this.setState({ clicked: true });
  }

  render() {
    const divClassName = [this.props.classname];
    if (this.state.clicked) divClassName.push('clicked');
    return (
      <div className={divClassName.join(' ').trim()} onClick={this.handleDivClick}>
        {this.props.children}
      </div>
    );
  }
}

export default ClickableDiv;

渲染标记

未点击：

<div class="blue"><p>This is my text.</p></div>

点击：

<div class="blue clicked"><p>This is my text.</p></div>

【讨论】：

【解决方案2】：

您可以将所需的背景颜色作为道具传递，并通过 onClick 处理程序使用内部状态。

Container.js

import React from 'react';
import ClickableDiv from './ClickableDiv';    

const Container = () => (
  <ClickableDiv backgroundColor="#FF0000">
    <p>This is my text.</p>
  </ClickableDiv>
);

export default Container;

ClickableDiv.js

import React, { Component } from 'react';

class ClickableDiv extends Component {
  constructor() {
    super();
    this.state = {};
    this.handleDivClick = this.handleDivClick.bind(this);
  }

  handleDivClick() {
    const { backgroundColor } = this.props;
    if (backgroundColor) this.setState({ backgroundColor });
  }

  render() {
    const { backgroundColor } = this.state;
    return (
      <div style={{ backgroundColor }} onClick={this.handleDivClick}>
        {this.props.children}
      </div>
    );
  }
}

export default ClickableDiv;

【讨论】：

谢谢！这肯定会在未来有所帮助（我是菜鸟）。尽管在这种特定情况下，我试图查看是否可以仅从 .css 或 .scss 文件访问。
@DORRITO 没问题！我想我对您要完成的工作感到困惑。您只是想 console.log 包含在 .css 文件中的样式，还是实际上试图覆盖样式？如果是这样，您是否要在 .css 文件中指定背景颜色？
如果不清楚是我的错，感谢您的耐心等待。我只提到了控制台日志作为一种调试方式（所以我自己可以弄清楚有人不想解释很多）。基本上，我有一些正方形，每个正方形在 css 文件中都设置为不同的颜色。我想要做的是访问和更改 css 文件中的正方形背景颜色，并在单击时更改它。（因此，如果有一个硬编码的红色框，例如单击会将其更改为蓝色。）我知道还有其他方法可以做到这一点，但我正在尝试练习从组件访问/更改 css 文件。
@DORRITO 我在单独的答案中提出了另一个建议。类似的概念，但需要在 .scss 文件中指定所有样式。

【解决方案3】：

最好制作一个外部 css 文件并将 css 代码写入该文件，然后将其导入 index.html

【讨论】：