FluentUi Timepicker 移除边框并使控件颜色变为灰色

Question

我无法删除边框并将控件颜色设置为灰色。我尝试了可以在测试工具中看到的不同内容，但在动态中导入解决方案后我无法找到更改

  <TimePicker
      placeholder={placeholder}
       useHour12={useHour12}
       onChange={(_, time) => handleTimeChange(time ? time.toString() : null)}
       timeRange={timeRange}
       styles={{
      root: {
        minWidth: "200px",
        backgroundColor: "#F5F5F5",
        border: "none",
        ".css-179": {
          border: "none",
          backgroundColor: "#F5F5F5"
        },
        ".css-178::after": {
          borderStyle: "none"
        }
        },
        
    }}
  />
);```

Answer 1

您走在正确的道路上，但这是正确的方法：

<Timepicker
  ...
  styles={{
    root: {
      backgroundColor: '#f5f5f5',
      '::after': {
        border: 'none'
      }
    },
    input: {
      backgroundColor: '#f5f5f5',
    }
  }}
/>

Codepen 工作示例。