在JSX中对齐标签中的文本

Question

我正在尝试将文本放在我的标签中心，它在我的示例中工作正常：http://codepen.io/p-adams/pen/qNxZBV但是如果我在浏览器中查看我的代码（Firefox），我{{1}中的文本标签不居中。我不确定这是否与浏览器有关。我有一些基本的造型：

<th>

然后在我的ReactJS组件中，我呈现th { border: 1px solid purple; width: 125px; text-align: center; padding: 10px; } ：

table

Answer 1

您需要找到覆盖您的规则的任何CSS规则，然后将您的规则重写为比您找到的规则更具体。例如，您可以将选择器更改为：

html body table th {
   border: 1px solid purple;
   width: 125px;
   text-align: center;
   padding: 10px;
}

了解浏览器如何确定哪些规则最相关 - https://developer.mozilla.org/en/docs/Web/CSS/Specificity

作为最后的手段，您可以将!important添加到text-align声明中。但这将使以后更难以覆盖规则 - https://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

您还可以在文本对齐后添加！important。这将使其具有更高的优先级。例如：

table th {
         color: #000 !important;
}