Using the Styled components in React

Introduction to styled-components

• styled-components is very useful for beginner.
• styled-components allows you to write actual CSS code to style your components.
• styled-components generates unique class names for your styles.
• it removes the mapping between components and styles.
• styled-components is the result of wondering how we could enhance CSS for styling React component systems.
• there are a lot of libraries which support the CSS-in-JS approach but I would like to focus on the styled-components
• This library use in any UI framework like Semantic-UI, Ant Design, material-UI, reactstrap, bootstrap etc..

Installing styled-components

npm install --save styled-components

It will be easier to understand what styled-components are with a simple example

import styled from 'styled-components'

const Wrapper = styled.section`
    padding: 4em; 
    background: black;
`

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
)

we have to import styled function from styled-components package and after that, we can choose from the predefined set of HTML tags(the library supports them all) an interesting component to use. styled-components uses one of the newest feature from ES6 standard of JavaScript.

Added Styles

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid white;
  border-radius: 3px;
`

const TomatoButton = styled(Button)`
  color: white;
  border-color: white;
`

To easily make a new component that inherits the styling of another, just wrap it in the styled() constructor. Here we use the button from the last section and create a special one, extending it with some color-related styling.

Passed Props

You can pass a function ("interpolations") to a styled component's

const Button = styled.button`
   background: ${props => props.primary ? "black" : "white"};
   font-size: 1em;
`

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
)

This button component has a primary state that changes its color. When setting the primary prop to true, we are swapping out its background and text color.

Styling and component

The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
)

const StyledLink = styled(Link)`
  color: white;
  font-weight: bold;
`

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)

Define Styled Components outside of the render method

It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided.

Write your styled components the recommended way:

const StyledWrapper = styled.div`
  font-size: 1em;
`

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>
}

Instead of:

const Wrapper = ({ message }) =>{
    const StyledWrapper = styled.div' font-size: 1em'
    
    return <StyledWrapper>{message}</StyledWrapper>
}

Used additional props

To avoid unnecessary wrappers that just pass on some props to the rendered component, or element, you can use the .attrs constructor. It allows you to attach additional props (or "attributes") to a component.

The .attrsobject also takes functions, that receive the props that the component receives. The return value will be merged into the resulting props as well.

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`

Styled-components also supported in React Native

styled-components can be used with React Native in the same way and with the same import. Try this example with

import React from 'react'
import styled from 'styled-components/native'

const StyledView = styled.View`
  background-color: papayawhip;
`

const StyledText = styled.Text`
  color: palevioletred;
`

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    )
  }
}

Summary

Styled-components is a fantastic library for creating maintainable, reusable, scoped (ahhh so many advantages!) styles for React applications. It’s super easy to use and you don’t have to learn new syntax or commands. the idea behind styled-components can be really weird at the beginning of your journey but if you give it a try.