如何制作具有一些動態 CSS 屬性的可重用樣式組件

Question

我想制作可重用的樣式組件，其中每個組件都有其默認屬性，但對於特定的東西，比如大小，我想在每次使用組件時指定。

例如，我有這個 InputField 組件：

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

const InputFieldContainer = styled.input`
  background: #252c37;
  border-radius: 15px;
  border: 0px;
  width: 80%;  ///   THESE TWO I HAVE 
  height: 75px; //   HARDCODED THE SIZE 
  font-size: 30px;
  color: white;
  padding-left: 15px;
  margin-bottom: 30px;
  &::placeholder {
    color: white;
  }
`;

function InputField(props) {
  return (
    <div>
      <InputFieldContainer
        type={props.type}
        value={props.value}
        name={props.name}
        placeholder={props.placeholder}
        onChange={props.onChange}
      />
    </div>
  );
}

export default InputField;

但是，每次我使用這個組件時，我都希望能夠在每次使用時更改一些值（如寬度和高度）。 換句話說，我不想硬編碼一些 CSS 值，只是獲得能夠在使用它們時指定它們的能力。

例如：

<InputField
      type="password"
      value={null}
      placeholder="password"
      label="password"
      name="password"
      onChange={null}
      width = "100px". // I know this isn't possible, but used as example
 ></InputField>

我知道通過使用它的優先級列表（內聯 CSS 等）使用 CSS 可能有解決此問題的方法，但肯定有更健壯/更清潔的方法嗎？

Answer 1

您可以像這樣將它們作為道具傳遞。 文檔中有關此的更多信息：

const InputFieldContainer = styled.input`
  background: #252c37;
  border-radius: 15px;
  border: 0px;
  width: ${({ width }) => width};
  height: ${({ height}) => height};
  font-size: 30px;
  color: white;
  padding-left: 15px;
  margin-bottom: 30px;
  &::placeholder {
    color: white;
  }
`;

function InputField(props) {
  return (
    <div>
      <InputFieldContainer {...props}/>
    </div>
  );
}

export default InputField;