我有这个组件。
// @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 定义的规则?