Search code examples
cssreactjscss-in-jsreact-calendar

Customize existing component with fixed css classes in React

I'm using react-calendar in my project, and it uses a plain CSS stylesheet (basically you import it in your project (import 'react-calendar/dist/Calendar.css';).

I'm able to customize the component writing my own CSS file, but since my project is themeable, I'd like to be able to pass some react props to the CSS.

I'm using Material-UI with JSS on all the other components, but these classes are dynamically named, and I couldn't find a way to use JSS with "fixed" class names.

Is there any way to have a CSS-in-JS solution but with fixed CSS classes?

Something like:

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

Thanks!

Solution

  • material-UI comes with global CSS plugin. With that at your component you can define/override global classes by declaring inside @global property:

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