React Styled Components (CSS-in-JS)

styled-components lets you style your components by writing CSS code using a feature called tagged template literals in JavaScript.

This approach eliminates the need for mapping between components and styles.

Installation

Install styled-components using npm or yarn,

# with npm
npm install styled-components

# with yarn
yarn add styled-components

Basic Usage

The code in the below example involves,

1. Importing the styled-components library.
2. Creating a styled button component with specific CSS styles using the styled.button syntax.
3. Using this styled button component within a React App component.

// Import style-components library
import styled from "styled-components";

// Creating a styled component
const StyledButton = styled.button`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

// Using it in your component
const App = () => {
  <>
    <div>
      <StyledButton>Click Me</StyledButton>
    </div>
  </>;
};

export default App;

Dynamic Styling