Introduction

When it comes to styling react components dynamically, we usually have to write a lot of code to manipulate the styles according to our needs. There is a switch between coding out components and styling these components using plain CSS. To make this process easier we can make use of styled-components in react. Styled components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way.

Using Styled Components

Let's not waste any more time and dive right into how we can use styled components in integration with React props to style components differently with reusable and reduced code.

Let’s assume we have two types of buttons on our page, one with a black background, and the other blue. We do not have to create two styled-components for them; we can adapt their styling based on their props.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

Because StyledButton is a React component that accepts props, we can assign a different background color based on the existence or value of the bg prop. Since the above StyledButton is an HTML button component, we can use the usual attributes that we use on an HTML button e.g: type.

function Profile() {
  return (
    <>
      <StyledButton bg="black" type="button">
        Button A
      </StyledButton>
      <StyledButton bg="blue" type="submit" onClick={() => alert("clicked")}>
        Button B
      </StyledButton>
    </>
  );
}

Styled components can differentiate between the types of props they receive. They know that type is an HTML attribute, so they actually render Button A, while using the bg prop in their own processing.

Speaking of attributes, an extended syntax lets us manage props using the attrs constructor. Check this out:

const StyledContainer = styled.section.attrs((props) => ({
  width: props.width || "100%",
  hasPadding: props.hasPadding || false,
}))`
  --container-padding: 20px;
  width: ${(props) => props.width}; // Falls back to 100%
  padding: ${(props) =>
    (props.hasPadding && "var(--container-padding)") || "none"};
`;

Notice how we don’t need a ternary when setting the width? That’s because we’ve already set a default for it with width: props.width || "100%",. Also, we used CSS custom properties because we can!

Conclusion

As we have seen in the above examples, styled-components work perfectly well with React props and developers write more reusable and concise code. Apart from props, there are several other advantages of using styled-components, however, as developers, we should not abuse the freedom given to us. We must ensure that we maintain the sanity in our code by avoiding heavy conditionals and making every component a styled component. We must also make sure that we do not over-abstract by creating nascent styled-components for use cases that you are only guessing are somewhere around the corner.