时间戳

首页 > 解决方案 > 如何制作具有一些动态 CSS 属性的可重用样式组件

javascript - 如何制作具有一些动态 CSS 属性的可重用样式组件

问题描述

我想制作可重用的样式组件，其中每个组件都有其默认属性，但对于特定的东西，比如大小，我想在每次使用组件时指定。

例如，我有这个 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 等）可能有解决此问题的方法，但肯定有更健壮/更清洁的方法吗？

标签： javascripthtmlcssreactjsstyled-components

解决方案

您可以像这样将它们作为道具传递。文档中有关此的更多信息：

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;

推荐阅读