代码之家 › 专栏 › 技术社区 › SoftTimur

删除TextField的下边框

fluentui-react fluent-ui css

SoftTimur · 技术社区 · 2 年前

我想删除Fluent UI的TextField的底部边框。我尝试了以下代码,但没有成功。

import "./styles.css";
import { TextField } from "@fluentui/react";

export default function App() {
  return (
    <TextField
      style={{
        textarea: { border: "none", borderBottom: "none" },
        input: { border: "none", borderBottom: "none" }
      }}
    />
  );
}

有人能帮忙吗?

PS:代码沙盒: https://codesandbox.io/s/epic-ramanujan-0jcsw1?file=/src/App.js:0-280

1 回复 | 直到 2 年前

alex3683 2 年前

边界定义在 fieldGroup TextField的元素。因此,使用 ITextFieldStyles 接口:

import "./styles.css";
import { TextField } from "@fluentui/react";

export default function App() {
  return (
    <TextField
      styles={{
        fieldGroup: { borderBottom: "none" }
      }}
    />
  );
}

调整后的沙盒: https://codesandbox.io/s/romantic-chandrasekhar-rp3x8f?file=/src/App.js:0-210

Briant 2 年前

尝试在.css上使用此代码

.no-border {
  border-bottom: none;
  outline: none;
}

这个在你的代码上

import "./styles.css";
import { TextField } from "@fluentui/react";

export default function App() {
  return <TextField className="no-border" />;
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前