How to style components properly in React

Question

I have the following component Login. What it does is not important but for the styling, you can see inside the render, I added loginStyle, columnStyle, and inputStyle. This works fine but I have another component Register pretty much identical to the Login component with just a few changes, which are not important. But in my Register component I have the same thing columnStyle, inputStyle, and instead of loginStyle I have registerStyle.

The styles I am applying in Login and Register are exactly the same. My question is do I create some sort of component that has all these stylings I created (and just create them once to not have duplicate code) and somehow use that to style anything that needs styling in different components or do I just keep a separate js file that contains all these styles and import it into separate component files. I just want to know the professionally accepted way for this. I am aware that we can use css but I see a lot of projects not using css to style their components.

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

The projects you refer to is most likely small ones. Using styling in this way is not scalable. Surely still a valid choice, as react native for example is better styled this way, or even small UI library alike components in projects. But in general, use css and smack preprocessor on top of that for even further enhancing development experience.

Then look up good rule set for your css, as an example Airbnb provides good things regarding this https://github.com/airbnb/css

This can be from simple names you use for classes, to file structure.