覆盖样式

覆盖默认组件样式就像将您自己的类名传递给 className 或传递给具有插槽的组件的 classNames 属性一样简单。

什么是插槽?

插槽是组件中可以单独设置样式的部分。例如,CircularProgress 组件具有多个可以单独设置样式的插槽/部分,例如 trackindicatorvalue 等。

具有插槽的组件具有一个 classNames 属性,允许您单独设置每个插槽的样式。

覆盖组件

让我们覆盖 Button 组件的默认样式,这是一个没有插槽的组件。

具有插槽的组件

一些 NextUI 组件具有插槽,这意味着您可以使用 classNames 属性设置组件内部所有部分的样式。例如,CircularProgress 组件具有以下插槽

  • base:圆形进度的基本插槽,它是主容器。
  • svgWrapper:svg 圆圈和值标签的包装器。
  • svg:圆圈的 svg 元素。
  • track:track 是圆形进度的背景圆。
  • indicator:indicator 是根据 value 填充的那个。
  • value:值内容。
  • label:标签内容。

可以使用 classNames 属性设置每个插槽的样式,下面的示例展示了如何更改某些插槽的样式以创建具有不同样式的圆形进度。

注意:您将在每个具有插槽的组件的文档中找到一个 Slots 部分。

CSS 模块

CSS 模块允许创建局部作用域的类和变量。以下是如何使用它来覆盖样式

以及相应的 CSS 模块

CSS-in-JS

如果您正在使用诸如 styled-componentsemotion 等 CSS-in-JS 库,您可以使用以下示例来覆盖组件的样式

在这个例子中,StyledCardStyledCardBodyStyledCircularProgress 组件具有原始组件和模板字符串中定义的自定义样式的组合样式。.attrs 方法用于将 classNames prop 添加到 StyledCircularProgress 组件。