React中如何正确设置组件样式，避免多组件重复编写相同样式代码

业内这两种实现方式都很常用，具体选哪一种取决于你两个组件的相似程度和后续迭代预期：

方案1：抽离公共样式到单独JS文件（轻量场景首选） #

如果你的Login和Register组件只有样式复用，后续结构、逻辑会有较大差异，直接抽离通用样式即可，成本最低。
你可以新建一个公共样式文件比如src/styles/commonFormStyles.js，把重复的样式导出：

// commonFormStyles.js
export const columnStyle = {
  display: 'flex',
  flexDirection: 'column',
  width: '100vw',
  rowGap: '30px',
};

export const inputStyle = {
  fontSize: '40px',
  outline: 'none',
  border: 'none',
  borderBottom: '1px solid black',
};

之后在Login、Register组件里直接导入使用即可，各自保留独有的容器样式（loginStyle/registerStyle）就行。这种方式修改通用样式时只需改一处，全量生效，冗余度极低。

方案2：封装公共通用组件（高复用场景首选） #

如果你的Login和Register不仅样式一致，结构、基础交互逻辑也高度相似（比如都是表单、输入框逻辑一致、仅提交逻辑和字段数量有差异），优先封装公共组件，连结构逻辑都可以一起复用，可维护性更高。
你可以封装一个AuthForm通用组件，把可变部分通过props传入：

// AuthForm.js 通用表单组件
import React from 'react';
import Button from '../Buttons/Button';
import { columnStyle, inputStyle } from '../styles/commonFormStyles';

const AuthForm = (props) => {
  const { containerStyle, fields, onSubmit, submitText } = props;
  const [formValues, setFormValues] = React.useState({});

  const onChange = (e) => {
    setFormValues(prev => ({...prev, [e.target.name]: e.target.value}));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formValues);
  };

  return (
    <form onSubmit={handleSubmit} style={containerStyle}>
      <div style={columnStyle}>
        {fields.map(field => (
          <input
            key={field.name}
            style={inputStyle}
            placeholder={field.placeholder}
            type={field.type}
            name={field.name}
            value={formValues[field.name] || ''}
            onChange={onChange}
          />
        ))}
        <Button type="submit">{submitText}</Button>
      </div>
    </form>
  )
}
export default AuthForm;

之后Login组件可以直接调用，不用重复写重复的结构逻辑：

// Login.js 改造后
import React from 'react';
import AuthForm from './AuthForm';

class Login extends React.Component {
  onSubmit = (values) => {
    alert('Login button clicked');
    // 登录业务逻辑
  }

  render() {
    const loginStyle = {
      display: 'flex',
      flexDirection: 'row',
      rowGap: '15px',
    };
    const loginFields = [
      {name: 'email', type: 'email', placeholder: 'Enter your email...'},
      {name: 'password', type: 'password', placeholder: 'Enter your password...'}
    ];
    return <AuthForm 
      containerStyle={loginStyle} 
      fields={loginFields} 
      onSubmit={this.onSubmit} 
      submitText="登录" 
    />
  }
}
export default Login;

Register组件同理，传入对应的注册容器样式、字段配置、注册提交逻辑即可。

关于不用原生CSS的说明 #

现在很多项目不用原生CSS做样式管理，主要是为了规避原生CSS全局污染、优先级冲突、样式复用性差的问题。你目前用的行内样式属于最基础的CSS-in-JS实现，如果后续样式复杂度提升，也可以换用成熟的CSS-in-JS库（比如styled-components、Emotion）、CSS Module、Tailwind CSS等方案，样式复用的核心逻辑和上面两种方案是一致的。

内容的提问来源于stack exchange，提问作者Michael Torres