Repro: https://codesandbox.io/s/mystifying-austin-02jpd4?file=/example.tsx
The specificity of the content styles in Input are more specific than the styles applied in bundled icons, the result is that both filled and regular icons are always visible
|
const useContentStyles = makeStyles({ |
|
base: { |
|
boxSizing: 'border-box', |
|
color: tokens.colorNeutralForeground3, // "icon color" in design spec |
|
// special case styling for icons (most common case) to ensure they're centered vertically |
|
'> svg': { display: 'block' }, |
|
}, |
|
disabled: { |
|
color: tokens.colorNeutralForegroundDisabled, |
|
}, |
|
// Ensure resizable icons show up with the proper font size |
|
small: { |
|
'> svg': { fontSize: '16px' }, |
|
}, |
|
medium: { |
|
'> svg': { fontSize: '20px' }, |
|
}, |
|
large: { |
|
'> svg': { fontSize: '24px' }, |
|
}, |
|
}); |
Repro: https://codesandbox.io/s/mystifying-austin-02jpd4?file=/example.tsx
The specificity of the content styles in
Inputare more specific than the styles applied in bundled icons, the result is that both filled and regular icons are always visiblefluentui/packages/react-components/react-input/src/components/Input/useInputStyles.ts
Lines 215 to 235 in 66bf89f