希望给 Input 和 Select 等输入框增加一个无边框的属性

[纸鹤]

问题的清晰而简明的描述

项目使用了tailwindcss,领导要求除非必要不要在style中写css，但是遇到 Input和 Select组件需要设置无边框，UI组件没有这个属性，在组件class上增加样式也无法生效。这必须在style中写css，例如以下附加上下文中的代码方式。但是写很多 --n的属性修改，不太美观且重复。因此希望增加一个属性用来控制是否显示边框。或者在 n-select 的属性class增加样式能够修改边框的属性。

建议的解决方案

暂无

备选方案

No response

附加上下文

<style lang="scss" scoped>
::v-deep(.n-input) {
    --n-border: none;
    --n-border-hover: none;
    --n-border-focus: none;
    --n-box-shadow-focus: none;
    --n-border-radius: none;
    border-radius: 0;
}
::v-deep(input:focus, select:focus) {
    border: none !important;
    border-radius: 0 !important;
    --tw-border-opacity: 0;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
::v-deep(.n-base-selection) {
    border-radius: 0;
    --n-border: none;
    --n-border-active: none;
    --n-border-focus: none;
    --n-border-hover: none;
    --n-border-radius: 0;
    --n-box-shadow-active: none;
    --n-box-shadow-focus: none;
    --n-box-shadow-hover: none;
}
::v-deep(.n-base-selection-tags) {
    flex-wrap: nowrap;
}
</style>

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在请求相同功能的问题，以避免创建重复的问题。

[吉仔]

添加 class，input 通过 input-props，select 也有提供几个 *-props；
通过调整主题方式的话得看暴露了哪些变量，通过 theme-overrides 属性覆盖，有些组件内部还复用了其他组件，修改就得通过 peers，例如：

 <n-input :theme-overrides="{ border: '0' }" />
 <n-select :theme-overrides="{ peers: { InternalSelection: { border: '0' } }  }">

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem