Material Tailwind Select组件自定义边框圆角Bug求助

问题描述 #

使用@material-tailwind/react的Select组件时，组件上方存在默认边框无法去除，相关信息如下：

组件表现 #

使用的npm包版本 #

@material-tailwind/react: 2.1.2, 
tailwindcss: 3 

代码示例 #

<Select
  className="!border-[var(--orange)] !rounded-[var(--secondary-select)]"
  label={label}
  animate={{
    mount: { y: 0 },
    unmount: { y: 25 },
  }}>
  {options.map((option, i) => {
    return <Option key={i}>{option}</Option>;
  })}
</Select>

解决方案 #

@material-tailwind/react的Select组件默认会为激活状态的label生成下划线边框，可通过以下方式修复：

1. 通过组件props精准控制样式
   利用组件自带的styles属性，直接移除label激活时的下划线或输入框底部边框：

<Select
  className="!border-[var(--orange)] !rounded-[var(--secondary-select)]"
  label={label}
  animate={{
    mount: { y: 0 },
    unmount: { y: 25 },
  }}
  styles={{
    label: {
      after: { display: "none" } // 移除label激活时的默认下划线
    },
    input: {
      borderBottom: "none" // 移除输入框底部默认边框
    }
  }}>
  {options.map((option, i) => {
    return <Option key={i}>{option}</Option>;
  })}
</Select>

2. 全局样式覆盖
   在Tailwind全局样式文件（如globals.css）中添加自定义层样式，强制覆盖组件默认边框：

@layer components {
  .mt-select .mt-input-label:after {
    display: none !important;
  }
  .mt-select .mt-input {
    border-bottom: none !important;
  }
}

3. 切换组件变体
   若默认的filled变体自带边框，可切换为outlined变体后再自定义边框样式：

<Select
  variant="outlined"
  className="!border-[var(--orange)] !rounded-[var(--secondary-select)]"
  label={label}
  animate={{
    mount: { y: 0 },
    unmount: { y: 25 },
  }}>
  {options.map((option, i) => {
    return <Option key={i}>{option}</Option>;
  })}
</Select>

注：若自定义样式优先级不足，可使用!important强制覆盖；确保--orange、--secondary-select等CSS变量已在全局作用域正确定义。

内容的提问来源于stack exchange，提问作者Forseti93