在 React 中使用固定 css 类 自定义现有组件

Question

我在我的项目中使用 react-calendar，它使用普通的 CSS 样式表（基本上您将它导入您的项目 (import 'react-calendar/dist/Calendar.css';)。

我可以自定义组件编写我自己的 CSS 文件，但由于我的项目是主题化的，我希望能够将一些反应道具传递给 CSS。

我在所有其他组件上使用 Material-UI 和 JSS，但是这些classes 是动态命名的，我找不到使用“固定”class 名称的 JSS 的方法。

有什么方法可以得到 CSS-in-JS 解决方案，但固定 CSS classes 吗？

类似于：

.react-calendar__tile--active:enabled:focus {
  background: {prop.backgroundColor};
}

谢谢！

Answer 1

material-UI 附带 global CSS 插件。在您的组件中，您可以通过在 @global 属性:

中声明来 define/override 全局 类

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  '@global': {
    '.react-calendar__tile--active:enabled:focus': {
      backgroundColor: props => props.backgroundColor,
    },
  },
});