如何使用react访问css/SCS？

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

我知道你可以在组件中设置颜色，但是我已经使用这个组件很多次了，我不想用不同的颜色创建多个组件文件，即使我这样做了，我也很好奇

---

如何通过组件访问css文件及其属性（甚至可以访问console.log来自己解决）？提前感谢。

您可以将所需的背景色作为道具传递，并使用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;

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;

.blue {
  background-color: blue;

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

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

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

export default Container;

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;

从“React”导入React；
从“./ClickableDiv”导入ClickableDiv；
常量容器=（）=>(
这是我的文本

);
导出默认容器；

ClickableDiv.js

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

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

export default Container;

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;

.blue {
  background-color: blue;

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

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

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

export default Container;

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;

import React，{Component}来自'React'；
类ClickableDiv扩展组件{
构造函数（）{
超级（）；
this.state={}；
this.handleDivClick=this.handleDivClick.bind（this）；
}
handleDivClick（）{
const{backgroundColor}=this.props；
if（backgroundColor）this.setState（{backgroundColor}）；
}
render（）{
const{backgroundColor}=this.state；
返回(
{this.props.children}
);
}
}
导出默认可点击div；

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

样式。scss

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

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

export default Container;

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;

.blue {
  background-color: blue;

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

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

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

export default Container;

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;

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;

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;

.blue {
  background-color: blue;

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

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

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

export default Container;

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;

从“React”导入React；
从“./ClickableDiv.js”导入ClickableDiv；
常量容器=（）=>(
这是我的文本

);
导出默认容器；

ClickableDiv.js

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

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

export default Container;

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;

.blue {
  background-color: blue;

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

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

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

export default Container;

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;

import React，{Component}来自'React'；
类ClickableDiv扩展组件{
构造函数（）{
超级（）；
this.state={单击：false}；
this.handleDivClick=this.handleDivClick.bind（this）；
}
handleDivClick（）{
this.setState（{单击：true}）；
}
render（）{
const divClassName=[this.props.classname]；
if（this.state.clicked）divClassName.push（'clicked'）；
返回(
{this.props.children}
);
}
}
导出默认可点击div；

---

呈现标记 解锁：

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

这是我的文本

点击：

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

这是我的文本

最好创建一个外部css文件，并在该文件中编写css代码，然后将其导入index.html

谢谢！这在将来肯定会有帮助（我是新手）。虽然在这个特定的例子中，我试图看看我是否可以仅从.css或.scss文件进行访问。@DORRITO没问题！我想我对你想要实现的目标感到困惑。您只是想将.css文件中包含的样式console.log，还是实际上要覆盖该样式？如果是这样，你想在.css文件中指定背景颜色吗？如果不清楚，那是我的错，谢谢你的耐心。我只提到了控制台日志作为调试的一种方式（因此我自己可以发现，有人不想解释太多）。基本上，我有一些方块，每个方块在css文件中被设计成不同的颜色。我想做的是访问和更改css文件中的方形背景颜色，并在单击时进行更改。（因此，如果有一个硬编码的红色框，单击会将其更改为蓝色，例如。）我知道还有其他方法可以做到这一点，但我正在尝试从组件访问/更改css文件。@DORRITO我在另一个回答中提出了另一个建议。类似的概念，但要求在.scss文件中指定所有样式。