react js中流畅的ui工具提示

问题描述

您好，我是使用 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>     

                                              

解决方法

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