流畅的 ui - 如何在 iconProps 通常渲染图标的 TextField 中显示/覆盖 Spinner 组件？

Question

我希望 TextField 有条件地准确显示 Spinner 组件如果将图标传递给 iconProps，则会在其中呈现图标。我得到了图标和微调器的条件渲染，但我不知道如何将组件包含到 TextField 中。所以，我认为最好的方法可能是覆盖？这是我的 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 和 Spinner 包裹 Textfield 和 Spinner 组件绝对位置。例如：

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

这里有一个完整的工作示例，其中包含一些很酷的东西。