# `styled-components` `styled-components` allow you to write actual CSS code in your JavaScript to style your components, removing the mapping between components and styles. See the [official documentation](https://github.com/styled-components/styled-components) for more information! ## Usage This creates two react components, `<Title>` and `<Wrapper>`: ```JSX import React from 'react'; import styled from 'styled-components'; // Create a <Title> react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a <Wrapper> react component that renders a <section> with // some padding and a papayawhip background const Wrapper = styled.section` padding: 4em; background: papayawhip; `; ``` *(The CSS rules are automatically vendor prefixed, so you don't have to think about it!)* You render them like so: ```JSX // Use them like any other React component – except they're styled! <Wrapper> <Title>Hello World, this is my first styled component!</Title> </Wrapper> ``` For further examples see the [official documentation](https://github.com/styled-components/styled-components).