时间戳

首页 > 解决方案 > React 中样式化组件的可重用性

reactjs - React 中样式化组件的可重用性

问题描述

我需要在其他组件中使用我的自定义微调器。所以我做了一个可重复使用的微调器？如何复制其样式并自定义其他样式？我只想更改stroke加载的或颜色。请在这里检查我的代码

Spinner.js

import styled from 'styled-components'

const StyledSpinner = styled.svg`
  animation: rotate 1s linear infinite;
  width: 50px;
  height: 30px;

  & .path {
    stroke: #000000;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
`

const Spinner = () => (
  <StyledSpinner viewBox="0 0 50 50">
    <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
  </StyledSpinner>
)

export default Spinner

新组件.js

import CustomSpinner from '../Spinner'

const Spinner = styled(CustomSpinner)`
   & .path {
     stroke: #fff;
  }
`

标签： reactjsreact-hooksstyled-components

解决方案

您可以在 Spiner.js 组件中添加自定义样式，然后将其导出。在 NewComponent.js 中，您可以导出自定义 spiner 样式并以与 Spiner.js 中相同的方式放置

Spinner.js

import styled from 'styled-components';

export const StyledSpinner = styled.svg`
 animation: rotate 1s linear infinite;
 width: 50px;
 height: 30px;

 & .path {
  stroke: ${({ colorValue }) => colorValue}; // color props 
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
 }

 @keyframes rotate {
   100% {
     transform: rotate(360deg);
   }
 }
 @keyframes dash {
   0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -35;
   }
   100% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -124;
   }
 }
`;

const Spinner = ({ colorValue }) => (
  <StyledSpinner viewBox="0 0 50 50" colorValue={colorValue}>
    <circle
     className="path"
     cx="25"
     cy="25"
     r="20"
     fill="none"
     strokeWidth="4"
   />
 </StyledSpinner>
);

export default Spinner;

新组件.js

import Spinner from '../Spinner';

const CustomSpiners = () => (
  <Spinner colorValue="white" />
  <Spinner colorValue="red" />
);

export default CustomSpiner

推荐阅读