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”导入到样式变量中 每当我将 className={styles.btn} 分配给某个 HTML 元素时，它都会从“Counter.css”继承样式。但是，我在这个 css 文件中有一个 #top-menu 的规则，它没有被分配到这个元素中。有没有办法以这种方式从 css 继承 id 定义的规则？

Answer 1

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