JSX Elements Reaction Does Not Inherit 'id' Style Properties

Question

I have this component

// @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;

As you can see, I am importing “Counter.css” into the style variable and whenever I assign className={styles.btn}some HTML element, it inherits the styles from “Counter.css”. However, I have a rule for #top-menuin this css file that is not assigned to this element. Is there a way to inherit specific id from css rules this way?

Answer 1

, css . , css- , #top-menu - #top-menu___3tSpk. , , , , :global(#top-menu)