帶有樣式組件的 defaultProps

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 MakeItGreen 為 true 而不是 false。