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

Question

我在我的项目中使用了react-calendar，它使用了一个普通的 CSS 样式表（基本上你将它导入到你的项目中（import 'react-calendar/dist/Calendar.css';）。

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

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

有没有办法拥有 CSS-in-JS 解决方案但具有固定的 CSS 类？

就像是：

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

谢谢！

Answer 1

material-UI 带有全局 CSS插件。在您的组件中，您可以通过声明内部@global属性来定义/覆盖全局类：

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,
    },
  },
});