如何在 React 中正确设置组件样式答案

【问题标题】：How to style components properly in React如何在 React 中正确设置组件样式
【发布时间】：2021-11-12 01:18:51
【问题描述】：

我有以下组件Login。它的作用并不重要，但对于样式，您可以在渲染内部看到，我添加了loginStyle、columnStyle 和inputStyle。这工作正常，但我有另一个组件 Register 与 Login 组件几乎相同，只是进行了一些更改，这并不重要。但是在我的Register 组件中，我有同样的东西columnStyle、inputStyle，而不是loginStyle 我有registerStyle。

我在Login 和Register 应用的样式完全一样。我的问题是我是否创建了某种具有我创建的所有这些样式的组件（并且只创建一次以没有重复的代码）并以某种方式使用它来样式化任何需要在不同组件中进行样式化的东西，或者我只是保留一个单独的 @ 987654334@ 包含所有这些样式的文件并将其导入到单独的组件文件中。我只想知道专业人士接受的方式。我知道我们可以使用css，但我看到很多项目没有使用css 来设置其组件的样式。

import React from 'react';
import Button from '../Buttons/Button';

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }

  onSubmit(event) {
    event.preventDefault();
    alert('Login button clicked');
  }

  render() {
    const loginStyle = {
      display: 'flex',
      flexDirection: 'row',
      rowGap: '15px',
    };

    const columnStyle = {
      display: 'flex',
      flexDirection: 'column',
      width: '100vw',
      rowGap: '30px',
    };

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

    return (
      <form onSubmit={this.onSubmit} style={loginStyle}>
        <div style={columnStyle}>
          <input
            style={inputStyle}
            placeholder='Enter your email...'
            type='email'
            name='email'
            value={this.state.email}
            onChange={this.onChange}
          />
          <input
            style={inputStyle}
            placeholder='Enter your password...'
            type='password'
            name='password'
            value={this.state.password}
            onChange={this.onChange}
          />
          <Button type='submit' />
        </div>
      </form>
    );
  }
}

export default Login;

【问题讨论】：

标签： reactjs styles

【解决方案1】：

您提到的项目很可能是小型项目。以这种方式使用样式是不可扩展的。当然仍然是一个有效的选择，例如 react native 更好地设计这种方式，甚至是项目中类似的小型 UI 库组件。但总的来说，在此基础上使用 css 和 smack 预处理器可以进一步增强开发体验。

然后为您的 css 查找好的规则集，例如 Airbnb 提供了关于此 https://github.com/airbnb/css 的好东西

这可以是您用于类的简单名称，也可以是文件结构。

【讨论】：

【解决方案2】：

更好的方法是让每个组件创建一个 .css 文件或 modules.css 文件，这种技术将帮助您保持您的样式与您的组件分离，并且您可以使其更容易响应。如果您的示例对两个或三个组件或 div 具有相同的样式-css，您可以使此样式全局化并在您的每个 js 文件中使用它。大多数元素都有 className 属性，例如，您可以通过命名来编写样式

<div className="columnStyle">
    <input
        className="inputStyle"
        placeholder='Enter your email...'
        type='email'
        name='email'
        value={this.state.email}
        onChange={this.onChange}
      />
</div>

您可以在 .css 文件中添加样式

.columnStyle {
  display: 'flex',
  flexDirection: 'column',
  width: '100vw',
  rowGap: '30px',
};

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

【讨论】：