Question

使用React，我有一个像：

的块

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

我添加了像

这样的风格

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

这适用于价值，但+和 - 标志不会变大。添加

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

使字体更大。为什么div风格不会被孩子继承？谢谢

Answer 1

您必须使用属性选择器，如此

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

您需要使用单独的逗号编写多个选择器，以便在div和按钮上应用相同的字体大小，请查看下面的代码段：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

大多数表单元素（input, select, textarea, button）默认情况下不会在CSS中继承字体属性，您必须指定它。 http://jsfiddle.net/pEedc/184/

Answer 3

将您的className更改为class，然后您就可以更改字体

＆＃13;

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

＆＃13;

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

＆＃13;

按钮不继承父div字体大小

3 个答案: