How to style components properly in React

user_9885901 0
Viewed 236

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;
reactjs styles
2 Answers

Is better approach for each component to make a .css file or modules.css file, this technique will help you to keep your style seperate from your component and you can make it responsive easier. If your example have same style-css for two or three components or divs you can make this style global and use it in your every js file. Most of the elements have className attribute that you can write your styles by name it for example

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

and in your .css file you can add the styling

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

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

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.

user_42051920
Related