避免使用样式组件中的代码重复-DEV365 开发者社区

假设您需要创建具有相似样式属性但不相同的不同元素。在CSS中执行此操作的传统方法是创建一个课程，并将该课程交给您的元素。然后，为不同的属性创建不同的类。

它看起来像下面的示例;

styles.css

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
}

.first-box {
  color: red;
}

.second-box {
  color: blue;
}

component.tsx

import React, { Component } from 'react';
import './styles.css';



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

和输出;

现在，我将向您展示两种不同的方法来使用样式组件实现相同的目标。

使用css``markup
继承另一个样式的组件

1。使用CSS`markup

在此示例中，我们将将共享的CSS值保存在变量中，并在创建其他组件时使用该变量。

component.tsx

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

const boxCss = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled.div`
  ${boxCss}
  color: red;
`;

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

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

我们有相同的视觉结果。
如您所见，我们保存了要在变量中共享的CSS标记，并将其用作样式组件定义中的文本。

2。继承另一个样式的组件

在此示例中，我们将创建一个名为具有共享属性的组件，我们将在创建其他组件时继承此组件。

component.tsx

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

const Box = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid green;
  border-radius: 6px;
`;

const FirstBox = styled(Box)`
  color: red;
`;

const SecondBox = styled(Box)`
  color: blue;
`;

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

您可以看到，我们仍然有相同的结果。

我希望您喜欢它，对您很有用。谢谢您的阅读。

您可以在LinkedIn上关注我，以获取与Web开发有关的更多内容。