如何为React组件添加margin这类样式？附自定义组件代码

嘿，我来帮你搞定给这些Semantic UI React组件加外边距的问题～其实有几种简单直观的方式，我结合你的代码给你演示：

1. 内联样式（快速调整首选） #

React支持直接给组件加style属性，注意要写成驼峰命名的对象（比如marginBottom而不是margin-bottom）。这种方式适合单个组件的快速样式调整，不用额外写CSS文件。

修改你的CategoriesDropdown组件示例：

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}
      style={{ marginBottom: '16px', marginRight: '8px' }} {/* 这里添加margin */}
    />
  );
};

2. 利用Semantic UI自带的间距工具类 #

Semantic UI React本身提供了现成的间距类名，完全符合框架的设计规范，不用自己算像素值。常用的类名格式是：

• m{t/b/l/r/x/y}-{1-5}：m代表margin，后面的字母是方向（t=上，b=下，l=左，r=右，x=左右，y=上下），数字是间距大小（1最小，5最大）

比如给你的IdentifiersInput加顶部外边距：

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

const IdentifiersInput = ({ identifiers, onIdentifiersChanged }) => {
  const handleChange = (e) => {
    onIdentifiersChanged(e.target.value);
  };

  return (
    <Input
      placeholder="Enter identifiers"
      value={identifiers}
      onChange={handleChange}
      className="mt-2" {/* 顶部margin，大小2 */}
    />
  );
};

3. 自定义CSS（复杂样式/复用场景） #

如果需要给多个组件统一设置样式，或者样式比较复杂，可以用单独的CSS文件、CSS模块或者CSS-in-JS方案（比如Styled Components）。

举个CSS模块的例子：

1. 新建一个styles.module.css文件：

.categories-dropdown {
  margin-bottom: 1.5rem;
  margin-left: 0.5rem;
}

.identifiers-input {
  margin-top: 1rem;
}

2. 在组件中引入并使用：

import { Select } from 'semantic-ui-react';
import styles from './styles.module.css';

const CategoriesDropdown = ({ categories, onCategorySelected, selectedCategory }) => {
  const handleChange = (e, { value }) => {
    onCategorySelected(value);
  };

  return (
    <Select
      placeholder="Select category"
      search
      options={categories}
      onChange={handleChange}
      value={selectedCategory}
      className={styles['categories-dropdown']}
    />
  );
};

这几种方法都能轻松给你的组件加上margin，你可以根据自己的场景选最适合的～

内容的提问来源于stack exchange，提问作者Daniel Hilgarth