Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?

Avoiding code duplication in styled components

For example you want to create completely different parts which have related type attributes however not the identical. Conventional approach to do that in CSS is to create a category and provides that class to your parts. You then create completely different lessons, for the completely different attributes.

It is going to appear like the instance beneath;

types.css

.field {
  show: flex;
  align-items: middle;
  justify-content: middle;
  width: 80px;
  top: 80px;
  border: 2px strong inexperienced;
  border-radius: 6px;
}

.first-box {
  shade: crimson;
}

.second-box {
  shade: blue;
}
Enter fullscreen mode

Exit fullscreen mode

part.tsx

import React, { Element } from 'react';
import './types.css';



class Element extends Element {
  render() {
    return (
      <div>
        <div className="field first-box">
          <span>first field</span>
        </div>
        <div className="field second-box">
          <span>second field</span>
        </div>
      </div>
    );
  }
}

Enter fullscreen mode

Exit fullscreen mode

And the output;

Now I’ll present you two other ways to realize the identical purpose utilizing styled-components.

  1. Utilizing css“ markup
  2. Inheriting one other styled part

1. Utilizing css“ markup

On this instance, we’ll save the shared piece of css values in a variable, and use that variable whereas we’re creating the opposite elements.

part.tsx

import React, { Element } from 'react';
import styled, { css } from 'styled-components';

const boxCss = css`
  show: flex;
  align-items: middle;
  justify-content: middle;
  width: 80px;
  top: 80px;
  border: 2px strong inexperienced;
  border-radius: 6px;
`;

const FirstBox = styled.div`
  ${boxCss}
  shade: crimson;
`;

const SecondBox = styled.div`
  ${boxCss}
  shade: blue;
`;

class App extends Element {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first field</span>
        </FirstBox>
        <SecondBox>
          <span>second field</span>
        </SecondBox>
      </div>
    );
  }
}

Enter fullscreen mode

Exit fullscreen mode

And we have now the identical visible end result.
As you’ll be able to see, we save the piece of css markup that we wish to share in a variable, and use it as a textual content inside styled part definition.

2. Inheriting one other styled part

On this instance, we’re going to create a part named that may have the shared attributes, and we’ll inherit this part whereas creating the opposite elements.

part.tsx

import React, { Element } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';

const Field = styled.div`
  show: flex;
  align-items: middle;
  justify-content: middle;
  width: 80px;
  top: 80px;
  border: 2px strong inexperienced;
  border-radius: 6px;
`;

const FirstBox = styled(Field)`
  shade: crimson;
`;

const SecondBox = styled(Field)`
  shade: blue;
`;

class App extends Element {
  render() {
    return (
      <div>
        <FirstBox>
          <span>first field</span>
        </FirstBox>
        <SecondBox>
          <span>second field</span>
        </SecondBox>
      </div>
    );
  }
}
Enter fullscreen mode

Exit fullscreen mode

As you’ll be able to see, we nonetheless have the identical end result.
Image description

Image description

I hope you preferred it and it was helpful for you. Thanks for studying.

You may observe me on LinkedIn for extra content material associated to internet improvement.

Add a Comment

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?