How can I use advanced features of styled-components in React?

How can I use advanced features of styled-components in React?

You can leverage features like theming, global styles, and animations in styled-components. Would you like examples?

Yes, please provide an example of theming.

Sure! You can create a theme object and use the ThemeProvider to pass it down. Here's a quick example:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: '#0070f3',
  secondary: '#1c1c1e',
};

const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponent />
  </ThemeProvider>
);

This allows you to access theme properties in your styled components.

What about global styles?

You can define global styles using the createGlobalStyle function. Here's an example:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    background-color: ${props => props.theme.secondary};
  }
`;

const App = () => (
  <> 
    <GlobalStyle />
    <YourComponent />
  </>
);

This will apply the styles globally across your application.