如何通过 props 其他组件添加模块样式

Question

我有一个组件

const UIComponent = ({ className }: Props) => {
  return (
    <div
      className={classNames(styles.component, styles.green, {
        className: className <--how to make it work?
      })}
    >
      Component
    </div>
  );
};

^ 这里只是添加了 className class，如果 className prop 被传递，我需要以某种方式通过这个 prop

传递样式

UIComponent 的样式

.component {
  font-size: 24px;
}
.green {
  color: green;
}

const App = () => {
  return (
    <>
      <UIComponent className={styles.red} />
      {/* ^^^ it should be red*/} 
      <UIComponent />
    </>
  );
};

应用样式

.App {
  font-family: sans-serif;
  text-align: center;
}

.red{
  color: red;
}

如何在另一个组件中添加 class名称

Answer 1

className 应该直接传递，而不是在对象中传递：

const UIComponent = ({ className }: Props) => {
  return (
    <div
      className={classNames(styles.component, styles.green, className)}
    >
      Component
    </div>
  );
};

这仍然不会将组件变为红色，因为有两个具有相同特异性的颜色样式规则，所以最后加载的那个（在本例中为绿色）优先。丑陋的解决方法是：

.red {
  color: red !important;
}

最好避免使用 !important，因此您可能希望找到更好的解决方案来使其更具体，例如嵌套类.

Answer 2

您可以使用 className 属性如果存在，否则使用 style.green class :

const UIComponent = ({ className }: Props) => {
  console.log(className);
  return (
    <div
      className={classNames(
        styles.component,
        className || styles.green,
      )}
    >
      Component
    </div>
  );
};

如何通过 props 其他组件添加模块样式

how can I add a module style, via props other components

classname

class-names

reactjs