Question

大家好，我一直在互联网上尝试将defaultProps应用于我的组件，但atm无法正常工作。

我将向您展示我的代码：

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;

任何帮助都将是有用的，我试图使自己的主题尽可能整洁。谢谢。

Answer 1

首先确保您已将道具传递到样式化的组件中

<Button props={this.props} />

然后在样式化的组件中设置格式

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

Answer 2

将defaultProps添加到组件中即可使用，即使使用“样式化组件”创建的组件也是如此。您需要在组件上定义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默认为true而不是false。

带样式组件的defaultProps

2 个答案: