2016-12-19 37 views
4

我有這個分量陣營JSX元素不繼承「ID」樣式屬性

// @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」到款式可變 ,每當我給你一些HTML元素,它繼承了'Counter.css'中的樣式。但是,我有一個規則#top-menu在這個CSS文件中沒有被分配到這個元素。有沒有辦法從這種方式繼承css的id定義的規則?

+0

請發表回覆Counter.css –

回答

2

我認爲你在構建過程中使用了css模塊。這意味着每個CSS選擇器都會得到一個後綴,並且您的#top-menu將變成類似#top-menu___3tSpk的東西。我不認爲這是一個推薦的方式去,但如果你真的需要它,比你可以創建這樣的全球名稱:global(#top-menu)

+0

我想你是對的..我沒有支付注意CSS加載器,並認爲這是一些開箱即用的魔術..我會嘗試獲得更多關於它的評論,如果沒有,我會給你答案 – user1326293