fluent ui - 如何 display/overlay TextField 中的 Spinner 组件，其中 iconProps 通常呈现图标？

Question

我想要 TextField to conditionally display the Spinner component exactly where an icon would render if you pass an icon to iconProps. I got the conditional rendering of the icon and spinner but I couldn't figure out how to include a component into TextField. So, I think the best way might be to possibly to overlay? Here is my codepen 来尝试覆盖 Spinner 组件

// Initialize icons in case this example uses them
initializeIcons();

const stackTokens = { childrenGap: 50 };
const iconProps = { iconName: 'Edit' };
const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
const columnProps: Partial<IStackProps> = {
  tokens: { childrenGap: 15 },
  styles: { root: { width: 300 } },
};

const TextFieldBasicExample: React.FunctionComponent = () => {
  return (
     <Stack horizontal tokens={stackTokens} styles={stackStyles}>
        <div style={{height: "100%", margin: "15px" }}>
          <Stack {...columnProps}>        
              <TextField label="With an icon" iconProps={iconProps} styles={{ root: { position: "absolute",zIndex: 1, width: "340px" } }}/>  
            </Stack>

            <div style={{display: "flex",
              zIndex: 13,
              // position: "absolute",
              // backgroundColor: "red", 
              justifyContent: "end"}}>
              <span style={{padding: "0px 24px 0px 8px"}}>
                <Spinner />
               </span>                    
            </div>          
         </div>  
     </Stack> 
  );
};

const TextFieldBasicExampleWrapper = () => <ThemeProvider><TextFieldBasicExample /></ThemeProvider>;
ReactDOM.render(<TextFieldBasicExampleWrapper />, document.getElementById('content'))````

Answer 1

用一个 div 包裹 Textfield 和 Spinner 组件，它具有 相对位置 和 Spinner 与 绝对位置。例如：

<div style={{ position: 'relative', width: 200 }}>
  <TextField label="With an Icon" />
  <Spinner
    styles={{ 
      root: { 
        position: 'absolute',
        top: 35,
        right: 8
      }
    }} 
  />
</div>

给你 full working example 一些很酷的东西。