删除可堆叠 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（见下文）替换为 padding: 0rem 0rem !important。然后导入 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

对自己的回答：

ReactJS "mostly" 不支持内联样式中的 !important 标签。不要在 React 内联样式中使用 !important！
可能，学习如何使用 Gulp 创建自定义主题是正确的选择。
与其修改 semantic-ui-css/semantic.css，不如创建一个特定于您的目标组件的 css 文件。实践中：
- 在与 MyComponent.js 相同的文件夹中创建 myComponent.css，并在其中写入新的 CSS 规则。
- 在 MyComponent.js 内添加 import ./myComponent.css。
- 使用 Chrome 开发人员工具（例如）检查页面，并在 Styles 选项卡的顶部检查哪些 CSS 规则当前具有最高的特异性。新规则需要更具体。为了解决这个问题，我们可以添加一个 noPadding class (!important is required 来绕过现有的 less-specific 规则中已经存在的 !important ):
  
  .ui.stackable.grid > .row > .column.wide.noPadding { padding: 0 !important; }
- 里面MyComponent.js,加上对应的class:
  
  <Grid.Column width="two" className="noPadding"> text_01 </Grid.Column>
在创建新的 css 规则时，请注意 CSS 特殊性，尤其是：
- 上下文不会影响特异性：即使 MyComponent 嵌套在 BigComponent.js 中，这也不会为 MyComponent 提供更高的特异性。
- 子选择器 (>) 不会增加特异性。选择器的数量确实会影响特异性。看： CSS: Child selector higher precedence than class selecctor?
关于语义-ui-react 的问题，最好在他们的 gitter 聊天室与社区会面： https://gitter.im/Semantic-Org/Semantic-UI-React

Answer 2

还有这个https://www.npmjs.com/package/react-with-important-style看起来很有前途。

见下文，我基本上用调用 withImportantStyle.

的 Wrapped var 替换了 Grid.Column（众所周知，很难删除填充）

  var Wrapped = withImportantStyle("div");  

  var columnStyle = {
    padding: "0 !important"
  };

  var segmentStyleButtons = {
    color:"red"
  };

  return (
    <Grid stackable columns={2} reversed="mobile">
      <Wrapped className="column" style={columnStyle}>
        <Segment>
          <List>
            <List.Item as='a'>Reset Password</List.Item>
            <List.Item as='a'>Resend Confirmation Link</List.Item>
          </List>
        </Segment>
      </Wrapped>
      <Wrapped style={columnStyle}>
          <Segment style={{ ...segmentStyleButtons, textAlign: "right" }}>
            <Button.Group>
              <Button primary>Login</Button>
              <Button.Or />
              <Button secondary>Register</Button>
            </Button.Group>
          </Segment>
      </Wrapped>
    </Grid>
  );

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

Remove padding in stackable Grid.Row

reactjs

padding

theming

css-specificity

semantic-ui-react