Question

我在React中使用模块化CSS。我必须将addClass添加到<h2>中，我该怎么做呢？问题是我正在使用模块化CSS，我知道如何在普通CSS中做到这一点。请帮助。这是我的组件

import React, { Component } from 'react';
import style from '../css/MessageHeader.css';


class MessageHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name : "name"
        }
    }
    render(){
        return(

            <div className={style.container}>
                <div className={style.iconWrapper}>
                    <i className ="fas fa-angle-left"></i>
                </div>
                <div className={style.profileWrapper}>
                   <h2 className={this.state.name}>john appleseed </h2> //this is how I would in normal css 
                </div>
            </div>
        );
    }
}

export default MessageHeader;

Answer 1

这将帮助您以这种方式添加className。变量是状态为类名的任何变量

    <h2 className={`${this.state.variable}`}></h2>

Answer 2

虽然可以使用全局类，但我假设您还希望将h2类的作用域限定于该组件。与其他类一样，您需要引用style导入-但要根据状态使用动态键，如下所示：

<h2 className={style[this.state.name]}>john appleseed </h2>

然后，您的css模块MessageHeader.css应该包含一个您要为其自定义样式的所有名称的类。

示例：

.container {
  // some styles here
}

.johnAppleseed {
  color: yellow;
}

// You can also specify a name as a child of the container just like normal css,
// although it's not really necessary
.container .bobBobbert {
  color: red;
}

请记住，如果您所在州的名称包含空格，则该名称不适用于CSS类名称，因此您必须进行一些转换（例如this.state.name.replace(...)才能删除空格和/或标点符号。

在React中的模块化CSS中使用状态值设置ClassName

2 个答案: