How do I implement global styles using styled-components?

How do I implement global styles using styled-components?

You can create global styles in styled-components by using the createGlobalStyle function. Here's a basic example:

Can you show me a code snippet for that?

Sure! Here's a simple code snippet:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
  }
`;

function App() {
  return (
    <> 
      <GlobalStyle />
      <h1>Hello World!</h1>
    </>
  );
}

What if I want to add styles for specific components?

You can still use createGlobalStyle for global styles, but for specific components, you should define styled components directly. For example:

Thanks! Can I also use themes with styled-components?

Yes, you can use themes with styled-components by utilizing the ThemeProvider. It allows you to define a theme and access it in your styled components.