Styling React Components

If you are new to React, you might be wondering, "How exactly do I add styling to my components?". In a basic HTML/ CSS website, adding styling can be as easy as just adding a CSS file alongside your HTML file. The same can be done with React, but React gives you more options to suit your specific needs. In this article, we will explore four popular methods for styling React components: Inline styles, CSS files, styled-components, and CSS modules. Each method has its strengths and weaknesses, and the best method for your project will depend on your specific needs and preferences.

Inline Styles

• Inline styles are CSS styles that are applied directly to an element using the attribute style. The value must be a JavaScript object. They’re applied almost the same way as Inline styles in pure html/CSS.

• Here's an example of how to use inline styles in React.

import React from 'react';

function MyComponent() {
  return (
    <div style={{ backgroundColor: 'red', color: 'white' }}>
      Hello, world!
    </div>
  );
}

• In this example, we’re using inline styles to set the background color of a div element.

• One of the big advantages of using inline styles is that they allow for dynamic styling, where a certain style is applied depending on the condition, i.e.: the state or props of a component.

• Inline styles are also faster than CSS since they are applied directly to the DOM element. However, they can make your code harder to read and maintain.

CSS Files

• Just like in pure HTML/CSS. You can include a CSS file that contains your styling. This allows you to separate your styling from your component code.

• Having a separate CSS file is great for when you have complex styles that need to be reused or changed dynamically.

• Here’s an example of how to link a CSS file to a React component:

    import React from 'react';
    import './styles.css';
  
    function MyComponent() {
      return (
        <div className="my-component">
          Hello, world!
        </div>
      );
    }
  

• In this example, we’re importing a CSS file called styles.css and using a class name called my-component to style the div element.

• However, inline styles have some disadvantages such as global scope which means that all the styles in the file apply to all components in your React app which can lead to naming conflict and make it difficult to manage your styles.

• Other disadvantages include lack of modularity and dynamic styling.

Styled Components

• React is popular for its capacity to allow you to divide your entire app into separate reusable components that work together as a whole. In the same regard, styled-components allow you to create reusable and composable UI components using JavaScript.

• To use styled-components, you first need to install the library using a package manager like npm or yarn. To install using npm run the command:

npm install styled-components

• Here’s an example of how to create a styled component in React:

• Start by importing the styled function from styled-components and using it to create a new component.

import React from 'react';
import styled from 'styled-components';

const MyComponent = styled.div`
  background-color: red;
  color: white;
`;

function App() {
  return (
    <MyComponent>
      Hello, world!
    </MyComponent>
  );
}

• Define the styles for the component using CSS-in-JS syntax.

• Use the styled component, in this case, MyComponent, in your React app by rendering it as a regular component.

• Styled components also allow you to pass in props to customize the styles. For example, you might create a styled component for a button that changes color when you hover over it:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary? 'blue' : 'white'};
  color: ${props => props.primary? 'white' : 'blue'};

  &:hover {
    background-color: ${props => props.primary? 'white' : 'blue'};
    color: ${props => props.primary? 'blue' : 'white'};
  }
`;

• One disadvantage of styled components is that, they require a JavaScript runtime and can affect the performance of your application.

CSS Modules

CSS modules are a way to scope your styles to a specific component. They are similar to CSS files, but they generate unique class names for each component. This make it easier to avoid naming conflicts and to write more maintainable CSS code.

To use CSS Modules, you first need to install the library using a package manager.

Here’s an example of how to use CSS modules in React:

import React from 'react';
import styles from './styles.module.css';

function MyComponent() {
  return (
    <div className={styles['my-component']}>
      Hello, world!
    </div>
  );
}

• In this example, we’re importing a CSS module called styles.module.css and using a class name called my-component to style the div element.

• One disadvantage of using CSS Modules is that they require a build step to generate unique class names for each component, which can add additional complexity to your development workflow.

Conclusion

In this article, we learned how to style React components using different methods. Inline styles are best used for simple styles that don’t need to be reused or changed dynamically. CSS files are better for complex styles that need to be reused or changed dynamically. Styled components and CSS modules are best used for styles that are specific to a component.