添加新的 css 类而不替换 React 组件上的旧类答案

【问题标题】：Add new css class with out replace the olders on a React Component添加新的 css 类而不替换 React 组件上的旧类
【发布时间】：2021-09-09 16:17:04
【问题描述】：

我有 2 个组件：

ButtonComponent:

export function Button(props: ButtonProps) {
  return <button className={styles.assignButton} {...props} />;
}

然后我想这样使用：

In another component:

<Button type="submit" className={styles.btnSubmit}>
  Cadastre-se
</Button>

但是当我这样做时，我丢失了在组件的第一个声明中定义的 css 类 styles.assignButton。

有什么方法可以做到这一点而不会丢失那个 css 类并保留两者？有点像传播运算符，我现在不知道。

感谢:)

【问题讨论】：

这能回答你的问题吗？ Passing in class names to react components

标签： css reactjs css-modules

【解决方案1】：

你可以这样做：

// Button.tsx

export function Button({ className, ...rest }: ButtonProps) {
  return <button className={`${styles.assignButton} ${className || ''}`} {...rest} />;
}

请注意，如果您不传入类名，您将在 assignButton 样式之后有一个尾随空格。在各种组件中处理类名可能会变得非常难以阅读，因此最好使用classnames 或类似的东西。

// Button.tsx

export function Button({ className, ...rest }: ButtonProps) {
  return <button className={classNames(styles.assignButton, className)} {...rest} />;
}

【讨论】：

【解决方案2】：

您可以通过这种方式在您的 Button 组件中实现这一点：

<button className={`${styles.assignButton} ${props.className}`} />

【讨论】：