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

回答自己：

ReactJS＆＃34;主要是＆＃34;不支持内联样式中的!important标记。不要在React内联样式中使用!important！
可能，学习如何使用Gulp创建自定义主题将是最佳选择。
而不是修改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>
在创建新的css规则时，要注意CSS特异性，尤其是：
- 上下文不会影响特异性：即使MyComponent嵌套在BigComponent.js中，这也不会给MyComponent提供更高的特异性。
- 子选择器（>）不会增加特异性。选择者的数量确实会影响特异性。看到： CSS: Child selector higher precedence than class selecctor?
关于语义 - 反应的问题，最好在他们的聊天室中与社区见面： https://gitter.im/Semantic-Org/Semantic-UI-React

Answer 2

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

请参阅下面的内容，基本上已经用我的Wrapped var（用withImportantStyle调用）替换了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中的填充

2 个答案: