样式化组件按钮扩展答案

【问题标题】：Styled Component Button Extension样式化组件按钮扩展
【发布时间】：2020-06-12 09:16:45
【问题描述】：

所以我的目标是拥有一个基本按钮组件，然后是一个变体按钮，它与基本按钮具有相同的标记，但显然具有不同的样式、动画。

我的基础文件是 button.js

 import React from 'react';
import styled,{ keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';

// import {rotatecw, rotateccw} from '../../../theme/keyframes';


const ButtonWrapper = styled.button`
  position: relative;
  color: ${(props) => props.theme.colors.primary};
  width: 256px;
  height: 64px;
  line-height: 64px;
  background: none;
  border: 1px solid ${(props) => props.theme.colors.primary};
    &:hover {
      cursor: pointer;
      color: ${(props) => props.theme.colors.grey};
      border: 1px solid ${(props) => props.theme.colors.grey};
    }
  }

`;

const ButtonText = styled.span`
  // transition: all 0.1s;
  // tranform: scale(1, 1);
`;


function Button(props) {
  return (
    <ThemeProvider theme={theme}>
      <ButtonWrapper>
        <ButtonText>  
          {props.text}
        </ButtonText>
      </ButtonWrapper>
    </ThemeProvider>
  );
}

export default Button;

到目前为止一切顺利。我的 AnimatedButton 文件是这样的

    import React from 'react';
import Styled, { keyframes, ThemeProvider} from 'styled-components';
import theme from '../../theme/default';
import Button from '../../components/button/button'

// import {rotatecw, rotateccw} from '../../../theme/keyframes';

const rotatecw = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`

const rotateccw = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
`



const AnimatedButtonWrapper = Styled(Button)` 
transition: all 0.3s;
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s;
    border: 1px solid ${(props) => props.theme.colors.primary};
  }
  &:hover {
    cursor: pointer;
    &:after {
      animation-name: ${rotatecw};
      animation-duration: 2s;
    }
    &:before {
      animation-name: ${rotateccw}; 
      animation-duration: 3s;
    }
    &:before,
    &:after {
      left: 96px;
      width: 64px;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
`;

function AnimatedButton(props) {
  return (
    <ThemeProvider theme={theme}>
      <AnimatedButtonWrapper>



      </AnimatedButtonWrapper>
    </ThemeProvider>
  );
}

export default AnimatedButton;

让我感到困惑的是底部。似乎是重复...如何确保它生成与 Button 相同的标记？我希望我的动画按钮扩展标记和 CSS。最终，有没有办法以这种方式调用我的按钮

<Button animatedButton text="test"></Button>

【问题讨论】：

为什么不简单地使用 CSS 类或连接两个对象进行内联 style={...baseButton, ...variantA}

标签： css reactjs styled-components

【解决方案1】：

当您使用styled(Button) 扩展Button 时，您实际上是在创建一个更具体的版本，并计划使用新的具体版本。

但是当你想将按钮用作：

<Button animatedButton text="test"></Button>

这是一个通过animatedButton 作为道具的变体，您希望将这些更改合并到ButtonComponent 本身中。

const ButtonWrapper = styled.button`
  All the normal button stuff

  ${props.animated && `
    All the animation stuff goes here
  `}
`
function Button(props) {
  return (
    <ThemeProvider theme={theme}>
      <ButtonWrapper animated={props.animatedButton}>
        <ButtonText>  
          {props.text}
        </ButtonText>
      </ButtonWrapper>
    </ThemeProvider>
  );
}

如果您有很多这样的变体，那么为这些变体创建样式可能会非常痛苦。这就是为什么styled-components 有一个帮助库styled-theming 可以提供帮助。（这对animated 部分没有太大帮助，因为这几乎是添加代码而不是更改。

【讨论】：