I am in the process of creating a custom user input control that includes a TextField, a Dropdown, and a Button.
To ensure that the TextField and Dropdown appear as a cohesive unit rather than two separate elements, I attempted to use two specific styles (borderTopLeftRadius and borderBottomLeftRadiustried) on the TextField to eliminate its rounded corners. Unfortunately, this approach did not yield the desired results.
https://i.sstatic.net/L8VnQ.png
This is the desired outcome I am aiming for: https://i.sstatic.net/JKyKz.png
Below is the relevant TypeScript code snippet:
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>
Upon inspecting the final rendered elements using the Developer Tools in the browser, I observed that the mentioned style was applied to the <input> tag rather than its parent element (<div>). I am aware that applying the style to the parent <div> would remove the rounded corners, but I am unsure of how to implement the style correctly.
https://i.sstatic.net/XxlDN.png
Thank you for your assistance.