ボタンは、私のようなブロックを持って、親のdivフォントサイズ

Question

リアクト使用を継承していない：私は

 #main { 
      margin: 20px; 
      font-size: 18px; 
     } 

これは値で動作

のようなスタイルを追加

<div id="main"> 
    0 
    <button className="counter-button" onClick={this.increment}>+</button> 
    <button className="counter-button" onClick={this.decrement}>-</button> 
    </div> 

が、+と - 兆候が大きくならない。追加する

 .counter-button { 
      margin-left: 10px; 
      height: 40px; 
      width: 40px; 
      font-size: 18px; 
     } 

フォントを大きくします。 divスタイルが子どもに継承されないのはなぜですか？ありがとう

Answer 1

ほとんどのフォーム要素（input, select, textarea, button）は、デフォルトでCSSのフォントプロパティを継承しません。指定する必要があります。 http://jsfiddle.net/pEedc/184/

Answer 2

は、あなたが変更することができます className classにフォントを変更

#main { 
 
      margin: 20px; 
 
      font-size: 18px; 
 
     } 
 
    #main .counter-button{ 
 
     font-size:35px; 
 
    } 
 
     .counter-button { 
 
      margin-left: 10px; 
 
      height: 40px; 
 
      width: 40px; 
 
      }

<div id="main"> 
 
    0 
 
    <button class="counter-button" onClick={this.increment}>+</button> 
 
    <button class="counter-button" onClick={this.decrement}>-</button> 
 
    </div>

Answer 3

あなたはあなたがする必要がある。この

[className='counter-button'] { 
     font-size: 35px; 
    } 

よう属性セレクタを使用する必要があります書きますカンマで区切って複数のセレクタは、DIVボタンを同じフォントサイズを適用し、以下のスニペットを確認する：

#main { 
 
    margin: 20px; 
 
} 
 
[className='counter-button'] { 
 
    margin-left: 10px; 
 
    height: 40px; 
 
    width: 40px; 
 
} 
 
/*For equal font size for both*/ 
 

 
#main, 
 
[className='counter-button'] { 
 
    font-size: 35px; 
 
}

<div id="main"> 
 
    0 
 
    <button className="counter-button" onClick={this.increment}>+</button> 
 
    <button className="counter-button" onClick={this.decrement}>-</button> 
 
</div>