Javascript 如何添加样式（如边距）以反应组件？

因此，我构建了两个简单的组件：

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

import{Input}来自“语义ui反应”；
从“语义ui反应”导入{Select}；
const categories下拉列表=（{categories，OnCategories Selected，selectedCategory}）=>{
常量handleChange=（e，{value}）=>{
onCategorySelected（值）；
};
返回(
);
};
常量标识符输入=（{标识符，onIdentifiersChanged}）=>{
返回(
);
};

到目前为止还没什么特别的

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

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

不幸的是，它们都是紧挨着显示的，中间没有任何边距

通常，我只会在第二个元素中添加一个

左边距
样式，但因为它是一个React组件，所以不起作用。使用
style={{marginLeft:'20px'}}
也不起作用，因为
IdentifierInput
组件没有使用它。

我知道我可以通过这样做来修复它：
我看到了几种方法，但我看到的最简单的方法是将类名传递给IdentifierInput，如下所示：

<IdentifiersInput className="marginLeft" identifiers={identifiers} onIdentifiersChanged={this.changeIdentifiers}/>



在IdentifierInput中，我只需将该类设置为输入：

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

const identifierInput=（{identifiers，onIdentifiersChanged，className}）=>{
返回(
);
};

语义UI的输入元素可以接收一个类名属性。
然后，我将使用CSS或SCS向特定类添加样式。在这种情况下，您需要的边距。
当您的组件专门用于另一个组件时，最好将包装器不关心的任何道具传递给包装的组件。否则，您将无法使用原始
组件的api，包括向其传递样式：

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

const identifierInput=（{identifiers，onIdentifiersChanged，…props}）=(
);

在某些有效的情况下，您可能明确希望阻止用户向包装的组件传递道具，但在我看来，这与这些情况不同

很明显，我这里肯定遗漏了什么。我该怎么申请
这样的布局CSS属性来反应组件

你没有错过什么。react组件没有通用的样式设置方法，因为它不是DOM元素。它可以有非常复杂的嵌套DOM表示，也可以根本没有表示。因此，在某个时候，作为组件的设计者，您必须决定样式、ID和类名应应用于何处。在您的情况下，传递这些道具并让
和
组件决定就很容易了。我觉得这相当优雅，而不是乏味。
我想我能理解

1） 直接将CSS应用于React组件是行不通的——我可以证实这一点

2） 将道具传递到低级别元素是乏味的，经过确认但可行的

注意
hasMargin
prop:

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

3） 你可以使用一个分割器组件来完成它，神圣而迅速有效

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

这就是为什么准确地知道周围的元素将是什么或可以是什么以及附近有哪些CSS类/ID是非常重要的原因。我们基本上是在尝试连接到某个对象，并正确识别框中的左子对象，然后在其右侧添加边距，或者针对右子对象，然后在其左侧添加边距（或者根据所有情况，针对两个对象，并将附加边距拆分到两个对象上）

记住还有
：：在
之前和
：：在
之后。欢迎您发挥创意，找到一种解决方案，包括
位置：相对
和
位置：绝对
，并且不添加任何标记

我现在就不回答了，因为我认为要么你已经考虑过伪选择器，要么你会很快找到有效的方法：）

实际上，这个或分割线是相当可行的。您可以使用媒体查询这一事实减轻了您对组件未来管理或可伸缩性的担忧。我不会对
说同样的话。当然，我仍然需要在每个组件中做一些事情。此外，它不会与现有值合并，例如，如果组件已经指定了样式或类名。您是否尝试将css添加到输入中而不是组件中？我为什么要这样做？react组件不应该是可重用的吗？没有有效的理由总是在
标识输入
上留有左边距。在那个特定的场景中，它恰好需要一个。在另一种情况下，它可能出现在
分类下拉列表之前，而可能需要一个正确的边距。什么样的边距？你不能在你的案例中使用flexbox吗？谢谢你的回答。我知道我可以这样做，但是这个解决方案类似于
{…props}
建议：1。我必须在每个组件和2中实现这一点。我必须添加额外的代码，以防我的组件已经添加了其他类名。我觉得这很乏味，因为我必须重复代码
，…props
和
{…props}
，以及任何样式和类名一次又一次地合并。我来自Angular，每个组件都是一个web组件，具有固有的风格。这是优雅的…感谢除法器和伪类的想法。我还没有考虑过它们，它实际上可能解决了我在“布局CSS”中遇到的问题。太好了，祝你好运。我最近在一个接触表单中使用了一个分隔器，其中一行有两个输入，其余的有一个。没有抱怨。我的意见是，最重要的是确保考虑到所有断点，尤其是移动
弹性方向：列
，当
选择
可能堆叠在
输入
顶部时。
const IdentifiersInput = ({identifiers, onIdentifiersChanged, className, hasMargin }) => {
  const inputPosition = hasMargin ? `${className} margin-sm` : className
  return (
    <Input
      className={inputPosition}
      placeholder="Enter identifiers..."
      value={identifiers}
      onChange={onIdentifiersChanged}
    />
  );
};

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

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

.Box {
  display: flex;
}

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