2

I am making a user input control which is composed of a TextField, a Dropdown, and a Button.

To make the TextField and Dropdown looks like a whole rather than two separate controls, I added two styles (borderTopLeftRadius and borderBottomLeftRadiustried) to the TextField to remove its rounded corner, but it's not working as expected.

enter image description here

This is what I'm hoping for: enter image description here

Here's the related code, in 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>

By looking at the final rendered elements using the Developer Tool on the browser, I notice the style mentioned is applied on the <input> tag, not its parent aka. <div>, I know that if the style is applied on the parent <div> the rounded corner is gone, but how can I add the style correctly?

enter image description here

Thanks.

YuWea
  • 165
  • 9

1 Answers1

3

Recommended approach by FluentUI is to use styles property instead style or className to modify component 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>

Full working example Codepen.

Read more about Component styling.

Marko Savic
  • 2,159
  • 2
  • 14
  • 27
  • The further info on the Component styling really helps, I've made more customizations thanks to the article. But the article said that a new approach to do the styling is on the way, can you kindly provide any info on this? – YuWea Jul 23 '21 at 02:40
  • 1
    I don't think anything will change drastically in a future, but follow new releases on their GitHub page to be up-to-date. With last FluentUI version this way is completely acceptable. – Marko Savic Jul 23 '21 at 08:20