默认属性和styled-components

Question

大家好，我一直在网上寻找如何将默认属性应用到我的组件上，但目前还没有成功。

我将展示我的代码：

import styled from "styled-components";

const Button = styled.button`
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 5px;
  border-style: none;
  :focus {
    outline: none;
  }
  ${props =>
    props.primary &&
    `
    background-color: ${props.theme.colors.primary};
    color: ${props.theme.colors.blank};
    :hover {
        background-color: ${props.theme.colors.blank};
        color: ${props.theme.colors.primary};
        border-style: solid;  
        border-color: ${props.theme.colors.primary}
    }
  `}
  ${props =>
    props.secondary &&
    `
    background-color: ${props.theme.colors.secondary};
    color: ${props.theme.colors.blank};
    :hover {
        background-color: ${props.theme.colors.blank};
        color: ${props.theme.colors.secondary};
        border-style: solid;  
        border-color: ${props.theme.colors.secondary}
    }
  `}
  ${props =>
    props.success &&
    `
    background-color: ${props.theme.colors.success};
    color: ${props.theme.colors.blank};
    :hover {
        background-color: ${props.theme.colors.blank};
        color: ${props.theme.colors.success};
        border-style: solid;  
        border-color: ${props.theme.colors.success}
    }
  `}
   ${props =>
     props.warning &&
     `
    background-color: ${props.theme.colors.warning};
    color: ${props.theme.colors.blank};
    :hover {
        background-color: ${props.theme.colors.blank};
        color: ${props.theme.colors.warning};
        border-style: solid;  
        border-color: ${props.theme.colors.warning}
    }
  `}
`;

export default Button;

我希望设置defaultProps，在未进行其他操作时，可以默认提供一些样式，例如：

<Button primary>Text</>

这里是另一个例子，有些不同：

import React from "react";
import styled from "styled-components";

const Wrap = styled.input`
  ${props =>
    props.primary &&
    `
    border: 2px ${props.theme.colors.primary} solid;
  `}
  ${props =>
    props.secondary &&
    `
    border: 2px ${props.theme.colors.secondary} solid;
  `}
  padding: 5px 10px;
  background-color: transparent;
  border-radius: 5px;
  text-align: center;
  :focus {
    outline: none;
  }
`;

const Input = ({
  type,
  onChange,
  placeholder,
  primary,
  secondary,
  className,
  value,
  name,
  ref,
  children
}) => {
  return (
    <Wrap
      type={type}
      onChange={onChange}
      placeholder={placeholder}
      primary={primary}
      secondary={secondary}
      value={value}
      name={name}
      ref={ref}
      className={className}
    >
      {children}
    </Wrap>
  );
};

export default Input;

任何帮助都将是有用的，我正在尝试制作一个尽可能简洁的主题。谢谢。

- Jacoborope

---

你在将props传递给styled-component <Button primary>Text</>的方式上有问题吗？我认为应该是：<Button primary={primary}>Text<Button/>。 - Michael

不，目前传递<Button primary>Whatever</Button>是正常工作的。我只想添加一个defaultProps，以防我没有添加“primary”或任何其他选项。例如，props.primary可以成为我的默认值。 - Jacoborope

Answer 1

将defaultProps添加到组件中可以直接使用，即使是由Styled Components创建的组件也是如此。您需要在组件上定义defaultProps。以下是一个来自新的create-react-app应用程序的完整示例：

import React from 'react';
import './App.css';
import styled from 'styled-components';


const ButtonBlue = styled.button`
  background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;

ButtonBlue.defaultProps = {
  actuallyMakeItGreen : true
}

function App() {
  return (
    <div className="App">
        <ButtonBlue>Cool</ButtonBlue>
    </div>
  );
}

export default App;

创建一个看起来像这样的按钮：

import React from 'react';
import './App.css';
import styled from 'styled-components';


const ButtonBlue = styled.button`
  background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;

function App() {
    return (
        <div className="App">
            <ButtonBlue>Cool</ButtonBlue>
        </div>
    );
}

export default App;

这里唯一变化的是defaultProps属性内部，我们将actuallyMakeItGreen默认值从false改为true。

- HPierce

Answer 2

首先确保你已经将props传递到了样式化组件中

<Button props={this.props} />

然后在您的样式化组件中，您应该按以下方式进行格式化

const Button = styled.button`
  ${({ props }) => `
    color: ${props.color};
  `}
`

- Pocket Merlin

---

嗯，我不理解你建议将父组件的props转发到按钮中（这就是props={this.props}要做的事情）。我不确定我理解这个目标是什么或者它如何与默认props相关。你能详细说明一下吗？ - HPierce