FluentUi Timepicker Remove border and make the control color grey

I am unable to remove the border and make the control color to grey.I have tried different things i can able to see in test harness but after importing solution in dynamics i am unable to find changes

  <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"
        }
        },
        
    }}
  />
);```

You are on the right path with pseudo after but this is correct approach:

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

Codepen working example.

Note:

.css-178, .css-179 are dynamic classes and they are different on every page load because FluentUI uses Merge Styles (CSS-IN-JS). Read more here.