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

Question

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

我在Login和Register中应用的样式完全相同。我的问题是我是否创建了某种具有我创建的所有这些样式的组件（并且只创建一次它们没有重复代码）并以某种方式使用它来设置任何需要在不同组件中设置样式的样式，或者我只是保留一个单独的 js 包含所有这些样式的文件，并将其导入到单独的组件文件中。我只想知道专业接受的方式。我知道我们可以使用 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;

Answer 1

是每个组件创建 .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',
};

Answer 2

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

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

的好东西

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

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

How to style components properly in React

styles

reactjs