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

Answer 1

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

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

1 个答案: