@emotion/styled-base

What is @emotion/styled-base?

@emotion/styled-base is a library for writing CSS styles with JavaScript. It allows you to create styled components with a tagged template literal syntax, providing a powerful and flexible way to style your React components.

What are @emotion/styled-base's main functionalities?

Creating Styled Components

This feature allows you to create styled components using the `styled` function. The example demonstrates how to create a styled button with hover effects.

const Button = styled.button`
  background-color: hotpink;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  &:hover {
    background-color: darkmagenta;
  }
`;

Theming

Theming allows you to define a theme object and use it throughout your application. The example shows how to use the `ThemeProvider` to pass a theme to styled components.

import { ThemeProvider } from '@emotion/react';

const theme = {
  colors: {
    primary: 'hotpink',
    secondary: 'darkmagenta'
  }
};

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  &:hover {
    background-color: ${props => props.theme.colors.secondary};
  }
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>Click me</Button>
  </ThemeProvider>
);

Dynamic Styling

Dynamic styling allows you to change styles based on props. The example demonstrates how to create a button that changes its background color based on the `primary` prop.

const Button = styled.button`
  background-color: ${props => props.primary ? 'hotpink' : 'gray'};
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  &:hover {
    background-color: ${props => props.primary ? 'darkmagenta' : 'darkgray'};
  }
`;

const App = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button>Secondary Button</Button>
  </div>
);

Other packages similar to @emotion/styled-base

styled-components

styled-components is a popular library for styling React components using tagged template literals. It offers similar functionality to @emotion/styled-base, including theming and dynamic styling. However, styled-components has a larger community and more extensive documentation.

@emotion/styled

@emotion/styled is another package from the Emotion library that provides similar functionality to @emotion/styled-base. It is more commonly used and has additional features like automatic vendor prefixing and better integration with other Emotion packages.

styled-jsx

styled-jsx is a library for styling React components with scoped CSS. It allows you to write CSS directly within your JavaScript files, similar to @emotion/styled-base. However, styled-jsx uses a different approach by injecting styles into the DOM and scoping them to components.