css - React - 如何设置与父元素相同的元素背景颜色

Question

我正在使用 tailwind css 创建一个自定义输入元素。输入具有浮动标签，因此当用户键入或专注于输入时，标签会完全收缩为材质 ui。

我想将标签的背景设置为与父级相同。所以如果父母的背景是白色或灰色，它应该有相同的背景。但我不知道如何实现它。有什么建议么？

export const CustomSelect = ({ label }) => {
  const [shrinked, setShrink] = useState(false);

  const handleLeave = (e) => {
    if (!e.target.value.length) setShrink(false);
  };

  return (
    <div className='relative'>
      <input
        onFocus={() => setShrink(true)}
        onBlur={handleLeave}
        className='w-full bg-transparent border border-gray-400 rounded hover:border-gray-800 focus:outline-none focus:border-2 focus:border-blue-800'
        style={{ padding: '18.5px 14px', height: '24px' }}
        type='text'
      />
      <label
        style={{
          transform: shrinked
            ? 'translate(4px, -13px) scale(0.75)'
            : 'translate(12px, 7px) scale(1)',
          background: 'inherit',
        }}
        className={`${
          shrinked && 'text-blue-800'
        } absolute top-0 left-0 px-1 text-gray-500 transition pointer-events-none`}
      >
        {label}
      </label>
    </div>
  );
};

标签： cssreactjstailwind-css