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

Question

在“语义UI反应”中，我想删除堆叠行之间的垂直填充。为什么这种内联样式不成功：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

回答自己：

1. ReactJS“大部分”不支持内联样式中的!important标记。不要在React内联样式中使用!important！
2. 可能，学习如何使用Gulp创建自定义主题将是最佳选择。
3. 而不是修改semantic-ui-css/semantic.css，更好地创建一个特定于您正在目标的组件的CSS文件。在实践中： 在与myComponent.css相同的文件夹中创建MyComponent.js，并在那里编写新的CSS规则。 在import ./myComponent.css中添加MyComponent.js。 使用Chrome Developper Tools（例如）检查页面，并在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. 关于语义 - 反应的问题，最好在他们的聊天室聊天社区：https://gitter.im/Semantic-Org/Semantic-UI-React

Answer 2

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

看到下面我基本上用我的Wrapped var替换了Grid.Column（这是很难删除填充的），它调用withImportantStyle。

  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>
  );