Styling (CSS-in-JS, Styled Components)

Styling in React: The Evolution

In the world of React and modern front-end development, styling components efficiently and maintainably has been a recurring challenge. Traditional CSS methods, such as global stylesheets or CSS modules, often come with their own set of complexities:

1. Global Scope Issues: Traditional CSS rules are globally scoped, leading to potential naming conflicts and unintended style overrides as applications grow.
2. Lack of Dynamic Styling: It's cumbersome to apply styles dynamically based on component state or props with pure CSS.
3. Colocation Challenges: Styles are often separated from the components they style, making it harder to manage and understand component styling at a glance.
4. Dead Code Elimination: Identifying and removing unused CSS can be difficult.

Introduction to CSS-in-JS

CSS-in-JS is a technique that addresses these issues by allowing developers to write CSS directly within JavaScript files. Instead of defining styles in separate `.css` files, CSS-in-JS libraries enable you to embed styles as part of your component logic. This approach offers several benefits:

* Scoped Styles: Styles are automatically scoped to the components, eliminating global conflicts.
* Dynamic Styling: Easily apply styles based on component props or state, making interactive UIs more straightforward to style.
* Colocation: Styles live alongside the components they style, improving discoverability and maintainability.
* Theming: Robust support for defining and consuming themes across your application.
* Dead Code Elimination: Since styles are tied to components, it's easier to remove styles when components are no longer used.
* JavaScript's Power: Leverage JavaScript's full power (variables, functions, logic) within your CSS.

Styled Components

Styled Components is one of the most popular CSS-in-JS libraries for React (and React Native). It leverages ES6 tagged template literals to allow you to write actual CSS code inside your JavaScript, creating actual React components with styles attached to them. This means you're creating 'styled' versions of HTML elements or other React components.

# Key Concepts of Styled Components:

1. Creating Styled Components: You define a styled component by using the `styled` factory with an HTML element (e.g., `styled.div`, `styled.button`) or another React component.
```javascript
import styled from 'styled-components';

const MyButton = styled.button`
background: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
```

2. Props for Dynamic Styling: Styled Components can receive props, allowing you to create dynamic styles based on these props.
```javascript
const MyButton = styled.button`
background: ${props => (props.primary ? 'palevioletred' : 'white')};
color: ${props => (props.primary ? 'white' : 'palevioletred')};
/* ... other styles ... */
`;
// Usage: <MyButton primary>Primary Button</MyButton>
// <MyButton>Secondary Button</MyButton>
```

3. Extending Styles: You can extend existing styled components to create new ones with additional or overridden styles.
```javascript
const OutlinedButton = styled(MyButton)`
border: 2px solid palevioletred;
background: transparent;
`;
```

4. Theming with `ThemeProvider`: Styled Components provides a `ThemeProvider` component that makes it easy to inject a theme object into all styled components within its subtree. This is excellent for managing consistent branding, colors, fonts, etc.
```javascript
import { ThemeProvider } from 'styled-components';

const theme = {
primaryColor: 'palevioletred',
secondaryColor: 'mediumseagreen',
fontFamily: 'Arial, sans-serif',
};

function App() {
return (
<ThemeProvider theme={theme}>
{/* Your components here, which can access the theme via props */}
</ThemeProvider>
);
}
```

5. `as` Prop: You can change the underlying HTML element or component that a styled component renders without changing its styles.
```javascript
const LinkButton = styled(MyButton).attrs({ as: 'a' })`
text-decoration: none;
`;
// Usage: <LinkButton href="#">Link as Button</LinkButton>
```

Styled Components simplifies styling in React by bringing CSS closer to the components, enhancing readability, reusability, and dynamic capabilities.

import React from 'react';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';

// 1. Define a global theme object
const theme = {
  primaryColor: '#61dafb',
  secondaryColor: '#282c34',
  dangerColor: '#ff4d4f',
  textColor: '#ffffff',
  backgroundColor: '#20232a',
  buttonPadding: '10px 20px',
  borderRadius: '8px',
  fontFamily: 'Segoe UI, Roboto, Helvetica, Arial, sans-serif',
};

// 2. Create a Global Style to reset some basic CSS or apply global styles
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: ${props => props.theme.fontFamily};
    background-color: ${props => props.theme.backgroundColor};
    color: ${props => props.theme.textColor};
  }
`;

// 3. Create a styled component for a container
const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
`;

// 4. Create a styled component for a title
const Title = styled.h1`
  color: ${props => props.theme.primaryColor};
  margin-bottom: 30px;
  text-align: center;
`;

// 5. Create a styled button component
const Button = styled.button`
  background: ${props =>
    props.primary
      ? props.theme.primaryColor
      : props.danger
      ? props.theme.dangerColor
      : props.theme.secondaryColor};
  color: ${props => props.theme.textColor};
  font-size: 1em;
  padding: ${props => props.theme.buttonPadding};
  border: none;
  border-radius: ${props => props.theme.borderRadius};
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin: 10px;
  
  &:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }

  // Using props to dynamically change styles
  ${props =>
    props.outline &&
    `
    background: transparent;
    border: 2px solid ${props.primary ? props.theme.primaryColor : props.theme.secondaryColor};
    &:hover {
      background: ${props.primary ? props.theme.primaryColor : props.theme.secondaryColor};
      color: ${props.theme.textColor};
    }
  `}
`;

// 6. Extend an existing styled component
const ReversedButton = styled(Button)`
  background: ${props => (props.primary ? props.theme.secondaryColor : props.theme.primaryColor)};
  &:hover {
    background: ${props => (props.primary ? props.theme.primaryColor : props.theme.secondaryColor)};
  }
`;

// 7. Main App component
function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Container>
        <Title>Styled Components Example</Title>
        <div>
          <Button primary>Primary Button</Button>
          <Button>Secondary Button</Button>
          <Button danger>Danger Button</Button>
        </div>
        <div>
          <Button outline primary>Outline Primary</Button>
          <Button outline>Outline Secondary</Button>
          <Button outline danger>Outline Danger</Button>
        </div>
        <div>
          <ReversedButton primary>Reversed Primary</ReversedButton>
          <ReversedButton>Reversed Secondary</ReversedButton>
        </div>
      </Container>
    </ThemeProvider>
  );
}

export default App;