Fluent UI Web：如何更改 TextField 的边框半径？

Question

我正在制作一个由 TextField、Dropdown 和 Button 组成的用户输入控件。

为了使 TextField 和 Dropdown 看起来像一个整体而不是两个单独的控件，我向 TextField 添加了两种样式（borderTopLeftRadius 和 borderBottomLeftRadiustried）以移除其圆角，但它没有按预期工作。

这就是我所希望的：

这是相关代码，在 TypeScript 中：

import React from 'react';
import { Stack, Text, Link, Dropdown, IDropdownStyles, ITextFieldStyleProps, IStackTokens, IStackStyles, ITextStyles, IDropdownOption, DropdownMenuItemType, PrimaryButton, TextField, initializeIcons, ITextFieldStyles } from '@fluentui/react';

const optionsFilterType: IDropdownOption[] = [
  { key: 'opt0', text: 'A', data: '11'},
  { key: 'opt1', text: 'B', data: '22' },
  { key: 'opt2', text: 'C', data: '33' },
];

<Stack horizontal>
  <TextField className="TTTT"
     style={{borderTopRightRadius: 0, borderBottomRightRadius: 0}}
     placeholder="---------Text----------" />
  <Dropdown
    style={{borderTopLeftRadius: 0, borderBottomLeftRadius: 0}}
    placeholder="---------Text----------"
    options={optionsFilterType}
    defaultSelectedKey="opt1" />
  <PrimaryButton text="查詢" />
</Stack>

通过在浏览器上使用开发人员工具查看最终呈现的元素，我注意到提到的样式应用于 <input> 标签，而不是其父标签。 <div>，我知道如果样式应用于父级 <div> 圆角消失了，但是如何正确添加样式？

谢谢。

Answer 1

FluentUI 推荐的方法是使用 styles 属性而不是 style 或 className 来修改组件 styles:

<Stack horizontal={true}>
  <TextField
     styles={{
       fieldGroup: {
         borderRadius: 0,
         borderRight: '0px solid transparent',
       }
     }}
     placeholder="---------Text----------"
  />
  <Dropdown
    styles={{
      title: {
        borderRadius: 0,
      }
    }}
    placeholder="---------Text----------"
    options={optionsFilterType}
    defaultSelectedKey="opt1"
  />
  <PrimaryButton text="查詢" />
</Stack>

完整的工作示例 Codepen。

详细了解 Component styling。

Fluent UI Web：如何更改 TextField 的边框半径？

Fluent UI Web: How to change border radius of TextField?

html

javascript

css

reactjs

fluentui-react