我的问题是：你更喜欢哪个选项，为什么？每种方法的优缺点是什么？

这是视频中的沙盒，你可以随意尝试：

import React from 'react';

import Slider from './Slider_props';
import styles from './VolumeSlider.module.css';

function VolumeSlider({ volume, setVolume }) {
  return (
    <Slider
      label="Volume"
      min={0}
      max={100}
      value={volume}
      onChange={(event) => {
        setVolume(event.target.value);
      }}
    />
  );
}

export default VolumeSlider;

好了，我们来讨论一下这些方案之间的权衡取舍！

第一点我需要说明的是，在 React 社区中并没有统一的意见。人们对这个问题看法强烈。

这些方法之间最大的区别在于它们赋予使用者多大的权限。使用 className 方式时，开发者可以对 <input> 标签应用任何他们想要的 CSS 样式。例如，只需一些 CSS，我们就可以强制它变成一个垂直滑动条：

import React from 'react';

import Slider from './Slider_className';
import styles from './VolumeSlider.module.css';

function VolumeSlider({ volume, setVolume }) {
  return (
    <Slider
      label="Volume"
      min={0}
      max={100}
      value={volume}
      className={styles.verticalSlider}
      onChange={(event) => {
        setVolume(event.target.value);
      }}
    />
  );
}

export default VolumeSlider;

通过暴露一个 className 属性，我们给予了使用者随意扩展此组件的权限，但这究竟是好还是坏呢？

老实说，正反两方面我都可以给出很充分的理由。我们先来看看两种观点，然后我会在下面分享我自己的看法。

针对特定属性的参数

在构建底层组件时，我们很可能会根据设计系统来实现它们。

正如我们之前所了解的，设计系统是一个提供每个组件使用指南和规则的文档。它会指明哪些修改是允许的，哪些修改是不允许的。我们实现的组件应该只允许设计系统中指定的自定义设置。

换句话说，我们要确保开发者“按规矩来”。通过暴露一个 className 属性，一个不守规矩的开发者可能会彻底改变这个组件的样式，将其随意变形，违反设计系统的规定。

一个外观专业的应用程序应当保持一致性，每个 Slider 实例都属于一套视觉体系。使用 className 属性后，应用程序最终将失去这种一致性。

组件的目的是封装标记、逻辑和样式。如果开发人员可以随意应用自己的样式，那么我们就无法真正实现封装。如果开发人员可以随心所欲地改变外观，那设计系统还有什么意义？

设计系统是活的文档，随着需求的变化，我们总可以对其进行更新。但如果允许开发人员随意为这些组件添加 CSS 样式，就会造成混乱。

关于“className”属性的论点

在现实世界中，“特定属性”方法往往会变得完全难以控制。

在上面的例子中，我们添加了 3 个属性，但这仅仅是冰山一角。例如，如果我们想允许使用者指定悬停颜色该怎么办？或者，如果我们想自定义滑块的大小，但仅限于特定的媒体查询？

CSS 是一门庞大而复杂的语言。最终我们可能会有 50 多个属性，这将变得难以维护，使用起来也毫无乐趣可言。每一个新属性都像是在塔顶上又放了一块叠叠乐™积木。

此外，设计师们总擅长创造出例外和一次性需求。不久之后，他们很可能会提出一个合理的用例，而这个用例却无法通过我们现有的特定属性来实现。那到时候我们该怎么办呢？

通常会发生这样的情况：开发者会完全“绕过” React，直接应用他们所需的任何 CSS：

/* HACK: Apply rotation to Slider component */
.some-wrapper form input[type="range"] {
  margin: 50px !important;
  transform: rotate(90deg) !important;
}

请记住，我们实际上无法阻止开发者对某个元素应用 CSS 样式！无论我们是否有 className 属性，一个有决心的开发者仍然可以应用他们想要的任何样式。

或者，更糟糕的是，他们可能会决定创建一个自己的组件 SliderAlt ，这个组件有 95% 的功能是相同的，但在这个特定方面却有所不同。一些代码库中存在多个几乎完全相同的组件，正是因为属性接口不够灵活。

想出少量与样式相关的属性就能适用于所有可能的使用场景，这是不现实的。现实世界太复杂，并不适合这样做。

我的观点

好的，我已经尽力总结了两方面的论点！但我自己怎么看呢？

我曾参与过一些团队，他们试图限制应用自定义样式的能力，但这种方法根本行不通。现实世界实在太复杂，而 CSS 也确实过于庞大且灵活。所以我喜欢添加一个 className 属性。

的确，一个不受约束的开发者可以随意应用任何 CSS 样式，从而让组件变得面目全非……但他们为什么会这么做呢？

根据我的经验，有时候是设计师希望打破系统规则，以创造出尽可能好的用户体验。通常，这种调整只是小小的改动，并未违背设计系统的初衷。

那一致性怎么办？就我个人而言，我认为精致度和用户体验比一致性更重要。我们不能因为被设计系统所限制，而提供更差的用户体验！当然，我们也不希望项目看起来杂乱无章，但我相信我们的设计师朋友不会把事情推向极端。

很多情况下这确实关乎信任。无论我们尝试设置什么样的限制，一个有决心的开发者总能找到绕过这些限制的方法。但我们应该信任我们的团队成员！

但话说回来，这只是我的个人观点，正如我所说，关于这个话题并没有统一的意见！我鼓励你去尝试不同的模式，看看哪种最适合你。