javascript - 如何添加样式 - 如边距 - 来 react 组件？

Question

所以，期待我构建的两个简单组件:

import {Input} from 'semantic-ui-react';
import {Select} from 'semantic-ui-react';

const CategoriesDropdown = ({categories, onCategorySelected, selectedCategory}) => {
    const handleChange = (e, {value})=>{
        onCategorySelected(value);
    };
    return (
        <Select placeholder="Select category" search options={categories} onChange={handleChange} value={selectedCategory} />
    );
};

const IdentifiersInput = ({identifiers, onIdentifiersChanged}) => {
    return (
        <Input placeholder="Enter identifiers..." value={identifiers} onChange={onIdentifiersChanged}/>
    );
};

到目前为止没有什么特别的。

但现在，我正在构建另一个组件，在 flexbox 行中显示这两个组件:

        <Box>
            <CategoriesDropdown categories={categories} selectedCategory={selectedCategoryId}
                           onCategorySelected={this.selectCategory}/>
            <IdentifiersInput identifiers={identifiers} onIdentifiersChanged={this.changeIdentifiers}/>
        </Box>

不幸的是，它们并排显示，中间没有任何空白。

通常，我会添加一个 margin-left第二个元素的样式，但因为它是一个 React 组件，所以它不起作用。使用 style={{marginLeft: '20px'}}也不起作用，因为 IdentifiersInput组件不使用它。
我知道我可以通过这样做来修复它:<Input style={style} ...在IdentifiersInput里面组件。
但是，这似乎是实现此目标的一种非常乏味的方式。基本上，我必须将它添加到我正在编写的每个组件中。
我显然一定在这里遗漏了一些东西。我应该如何将此类布局 CSS 属性应用于 React 组件？

Answer 1

我想我明白了。

1) 将 CSS 直接应用于 React 组件不起作用——我可以确认这一点。

2) 将 props 传递给低级元素是乏味的，已确认但可行。

公告hasMargin Prop :

<Box>
  <CategoriesDropdown
    categories={categories}
    selectedCategory={selectedCategoryId}
    onCategorySelected={this.selectCategory}
  />
  <IdentifiersInput
    identifiers={identifiers}
    onIdentifiersChanged={this.changeIdentifiers}
    hasMargin
  />
</Box>

可能的输入:

const IdentifiersInput = ({identifiers, onIdentifiersChanged, className, hasMargin }) => {
  return (
    <Input
      className={className}
      placeholder="Enter identifiers..."
      value={identifiers}
      onChange={onIdentifiersChanged}
      style={hasMargin ? ({ marginLeft: '0.8rem' }) : ({})}
    />
  );
};

注意:我不喜欢样式，我喜欢添加一个额外的类，因为可以通过媒体查询调整类:

const IdentifiersInput = ({identifiers, onIdentifiersChanged, className, hasMargin }) => {
  const inputPosition = hasMargin ? `${className} margin-sm` : className
  return (
    <Input
      className={inputPosition}
      placeholder="Enter identifiers..."
      value={identifiers}
      onChange={onIdentifiersChanged}
    />
  );
};

如果找到inputPosition如上所示过于冗长:

className={hasMargin ? `${className} margin-sm` : className}

3) 你可以使用分隔组件来完成它，虽然亵渎神明但效果很快

<Box>
  <CategoriesDropdown
    categories={categories}
    selectedCategory={selectedCategoryId}
    onCategorySelected={this.selectCategory}
  />
  <div className="divider" />
  <IdentifiersInput
    identifiers={identifiers}
    onIdentifiersChanged={this.changeIdentifiers}
  />
</Box>

如果需要，您可以在任何断点处使用媒体查询和控制填充。

4) CSS 伪元素或伪类，到目前为止我没有在答案中看到任何提及它们。

• MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

• CSS 技巧:https://css-tricks.com/pseudo-class-selectors/

通常，当您有一组随机的 DOM 元素时，您可以计算出一种使用 CSS 将它们整理到正确位置的方法。可用伪类的列表位于该 MDN 链接中。老实说，只看它们并推理出潜在的组合是有帮助的。

我目前的问题是我不知道 <Box /> 里有什么除了它可能有一个 div 与 display: flex;在上面。如果我们只需要继续，那么 div 就叫做 <div className="Box"> ，也许像这样的一些 CSS 会修复它:

.Box {
  display: flex;
}

.Box:first-child {
  margin-right: 0.8rem;
}

这就是为什么准确了解周围元素将会或可能是什么，以及附近有哪些 CSS 类/ID 极其重要的原因。我们基本上是在尝试 Hook 某些东西并正确识别 Box 中的左子节点并在其右侧添加边距，或者以右子节点为目标并在其左侧添加边距(或者根据所有情况，同时定位两个子节点并拆分附加的两者都有 margin )。

记住还有::before和 ::after .欢迎您发挥创意并找到涉及 position:relative 的解决方案和 position: absolute并且不添加任何标记。

我暂时保留我的答案，因为我认为要么你已经考虑过伪选择器，要么你很快就会找到有用的东西:)

那个或分隔线实际上是非常可行的。您可以使用媒体查询这一事实使您不必担心组件的 future 管理或可伸缩性。我不会对 <div style={{}} /> 说同样的话.