覆盖样式
覆盖默认组件样式非常简单，只需将您自己的类名传递给带有插槽组件的 className 或 classNames 属性即可。
什么是插槽？
插槽是组件的一部分，可以使用 classNames 属性单独设置样式。例如，CircularProgress 组件具有 track、indicator 和 value 等插槽，它们都可以独立设置样式。
覆盖组件
让我们覆盖 Button 组件的默认样式，这是一个没有插槽的组件。
带有插槽的组件
一些 HeroUI 组件具有可以使用 classNames 属性单独设置样式的插槽。CircularProgress 组件具有以下插槽
- base: 圆形进度的基础插槽，它是主容器。
- svgWrapper: svg 圆圈和值标签的包装器。
- svg: 圆圈的 svg 元素。
- track: track 是圆形进度的背景圆圈。
- indicator: indicator 是根据
value填充的那个。 - value: 值内容。
- label: 标签内容。
下面的示例演示了如何设置这些插槽的样式以创建自定义圆形进度
注意：您将在每个带有插槽的组件的文档中找到一个
Slots部分。
CSS Modules
CSS Modules 允许创建本地作用域的类和变量。以下是如何使用它来覆盖样式
使用相应的 CSS module
CSS-in-JS
如果您正在使用 CSS-in-JS 库，例如 styled-components 或 emotion，则可以使用以下示例来覆盖组件的样式
每个 styled 组件都将原始组件样式与模板字符串中定义的自定义样式相结合。StyledCircularProgress 使用 .attrs 来添加 classNames。
