All default state styles (i.e. styles that are not applied with conditions) should be declared in makeResetStyles to avoid className bloat.
makeResetStyles returns one single className for all its styles. Each slot should also use reset styles for its base default styles
Here is an example
|
const useRootBaseClassName = makeResetStyles({ |
|
// reset default button style: |
|
fontFamily: 'inherit', |
|
padding: '0px', |
|
appearance: 'button', |
|
textAlign: 'unset', |
|
|
|
display: 'inline-grid', |
|
alignItems: 'center', |
|
gridTemplateAreas: ` |
|
"media primary dismissIcon" |
|
"media secondary dismissIcon" |
|
`, |
|
boxSizing: 'border-box', |
|
width: 'fit-content', |
|
|
|
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`, |
|
}); |
|
|
Components that I see that could have makeResetStyles but don't:
- BreadcrumbItem
- useIconStyles
All default state styles (i.e. styles that are not applied with conditions) should be declared in makeResetStyles to avoid className bloat.
makeResetStylesreturns one single className for all its styles. Each slot should also use reset styles for its base default stylesHere is an example
fluentui/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts
Lines 27 to 45 in 01d9fdb
Components that I see that could have makeResetStyles but don't: