React JSX元素不继承“id”样式属性

Question

我有这个组件。

// @flow
import React, { Component } from 'react';
import { Link } from 'react-router';
import styles from './Counter.css';

class Counter extends Component {
    props: {
        activate: () => void,
        counter: number
    };

    render() {
        const { activate, counter } = this.props;
        return ( 
            <div className = { styles.container}>
            <div id="top-menu" className="ui secondary menu">
                <a className="active item">
                    Home
                </a>
                <a className="item">
                    Messages
                </a>
                <a className="item">
                    Friends
                </a>
                <div className="right menu">
                    <a className="ui item">
                    Logout
                    </a>
                </div>
            </div>
            <input type = "text" placeholder = "Enter activation key" className = {styles.input} /> 
            <button className = { styles.btn } onClick = { activate } > < i className = "btn"/>lala</button>  
            </div>
        );
    }
}

export default Counter;

如您所见，我将 'Counter.css' 导入到 styles 变量中，每当我给某个 HTML 元素分配 className={styles.btn}，它就会继承 'Counter.css' 的样式。然而，在这个 CSS 文件中，我有一个针对 #top-menu 的规则没有被分配到这个元素中。是否有任何方法可以以这种方式从 CSS 中继承 id 定义的规则？

- user1326293

---

请发布Counter.css文件。 - Artem Dudkin

Answer 1

我想你正在使用css模块在构建过程中。这意味着每个css选择器都会获得一个后缀，你的#top-menu将变成类似于#top-menu___3tSpk的东西。我不认为这是一个推荐的方法，但如果你真的需要它，那么你可以像这样创建全局名称:global(#top-menu)。

- Constantin Harabara

---

我想你是对的。我没有注意到css加载器，以为这是一些开箱即用的魔法。我会尝试获取更多关于它的评论，如果不行，我会给你答案。 - user1326293