reactjs - 删除可堆叠 Grid.Row 中的填充

Question

在“Semantic UI React”中，我想删除堆叠行之间的垂直填充。 为什么这个内联样式不成功: style={{ padding: '0rem 0rem !important' }} ?

import React from 'react';
import { Grid, Segment } from 'semantic-ui-react';

function Footer() {
  return (
    <Grid textAlign="center" stackable>
      <Grid.Row 
        divided 
        style={{ padding: '0rem 0rem !important' }}
      >
          <Grid.Column width="two">text_01</Grid.Column>
          <Grid.Column width="two">text_02</Grid.Column>
      </Grid.Row>
    </Grid>
  );
}

export default Footer;

(我希望两个文本元素位于页面中间。在宽屏幕上:彼此相邻。在小屏幕上:彼此堆叠。在这两种情况下，它们不应该距离太远彼此，因此没有填充。并且每个文本元素不应分布在多行上。)

我找到的唯一解决方案是编辑 semantic-ui-css/semantic.css，将 padding: 1rem 1rem !important (见下文)替换为 填充:0rem 0rem!重要。然后导入该 CSS 文件而不是通常的 semantic.min.css。

这实际上是一种可以接受的做法吗？

.ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column,
.ui.stackable.grid > .column.grid > .column,
.ui.stackable.grid > .column.row > .column,
.ui.stackable.grid > .row > .column,
.ui.stackable.grid > .column:not(.row),
.ui.grid > .stackable.stackable.row > .column {
  width: 100% !important;
  margin: 0em 0em !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 1rem 1rem !important;
}

注意，因为我从未使用过 Gulp，所以我不想专门针对这个问题构建自定义主题。

Answer 1

回答我自己:

1. ReactJS“大部分”不支持 !important内联样式中的标记。不要使用!important在 React 内联样式中!
2. 学习如何使用 Gulp 创建自定义主题可能是正确的选择。

3. 而不是修改semantic-ui-css/semantic.css ，最好创建一个特定于您要定位的组件的 css 文件。在实践中:

   • 创建myComponent.css与 MyComponent.js 位于同一文件夹中，然后在其中编写新的 CSS 规则。
   • 添加import ./myComponent.css里面MyComponent.js 。

   • 使用 Chrome 开发者工具(例如)检查页面并检查 Styles 的顶部当前具有最高特异性的 CSS 规则选项卡。新规则需要更加具体。为了解决这个问题，我们可以添加一个 noPadding类(!important 需要绕过现有不太具体的规则中已有的 !important):

     .ui.stackable.grid > .row > .column.wide.noPadding { padding: 0 !important; }

   • 在MyComponent.js中，添加相应的类:

     <Grid.Column width="two" className="noPadding"> text_01 </Grid.Column>

4. 在创建新的 CSS 规则时，请注意 CSS 的特殊性，尤其是:

   • 上下文不会影响特异性:即使 MyComponent 嵌套在 BigComponent.js 中，这也不会为 MyComponent 提供更高的特异性。
   • 子选择器 ( > ) 不会增加特异性。选择器的数量确实会影响特异性。看: CSS: Child selector higher precedence than class selecctor?
5. 对于有关语义-ui- react 的问题，最好在他们的 gitter 聊天室中与社区见面: https://gitter.im/Semantic-Org/Semantic-UI-React