node.js - What is best practice for styling npm React component packages and how to make styling after npm install easy?

Question

I have created a npm package for an accessible React date-picker component. Basically it is styled to a minimum by me. However I want the people who install it to be able to customize it. My one solution is that people copy the class names I have created and overwrite them with important!. This doesn't really seem to be the best practice or the solution...

So far I have a classic import styles from "../styles/stylesDatePicker.css"; and a css file that has stylings like this:

:root {
  --main: #f5f5f5;
  --secondary: #2b4450;
  --third: #871111;
}

.abbrDays {
  border: none;
  text-decoration: none;
  padding: 8px;
  color: var(--third);
}

Ive looked in to how material UI handles this and I am a bit confused as to their practice but their end result is fantastic. Can anyone give me good tips as to how I should build the component so that someone who uses npm install can easily pass on styling of their choice?

question from:https://stackoverflow.com/questions/65934773/what-is-best-practice-for-styling-npm-react-component-packages-and-how-to-make-s

Answer 1

Waitting for answers