react js中流利的ui工具提示

Question

您好，我是使用 fluent ui 并将其应用于我的反应的新手。

我正在尝试将我的工具提示与我的文本字段对齐，并尝试将背景颜色更改为黑色并将字体更改为白色。还增加了工具提示框的宽度和高度。

     const inlineBlockStyle = (styleProps) => {
    
            const chkStyles = {
    
                root: [{
    
                    display: 'inline-block',
                    color: 'white',
                    backgroundColor: black,
                    height: '100px',
                    width: '500px,'
                }],
    
            };
    
            return chkStyles
        };


   <TooltipHost
       content="If your school is not on our list, please go to the Support Page 
       and provide your schools details.  
    
       id={tooltip2Id}                                        
       calloutProps={calloutProps}
       styles={inlineBlockStyle}
    >

      <Label style={{ color: "white", fontSize: "20px" }}>  
        Please select your county and your school
         <i className="ms-Icon ms-Icon--Info" </i>
      </Label>

   </TooltipHost>     

                                              

Answer 1

const styleProps= {
  rootHovered: {
    backgroundColor: "black"
  }
};
//
<FluentPrimaryButton text = {label} styles = {styleProps} />;