如何使用React添加样式？

Question

在自定义的输入组件中，

import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";

type InputTypeProps = {
  disabled: boolean;
};

export const MyInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
  disabled,
  props
) => {
  return <Input type="text" disabled={disabled} {...props} />;
};

const Input = styled.input`
  ${() => css<InputTypeProps>`
    background-color: ${({ disabled }) => (disabled == false ? "white" : "gray")};
  `}
`;

当使用此组件时，

import { MyInput } from "~/components";

const Home: NextPage = () => {
  const disabled = false;
  return (
    <MyInput name="input1" disabled={disabled} />
  );
};

当我将禁用设置为true或false时，它会显示灰色。似乎这种方式不起作用。是否可以处理此HTML属性以以反应方式改变？

Answer 1

更改此。

const Input = styled.input`
background-color: white;
&:disabled {
   background-color: gray;
}
`;