Control slider styling with css-modules

[savelichalex]

It would be cool if slider can be styled with css-modules, but right now I can only redefine class prefix or create new styles as childs to new root className. What do you think about it?

[just-boris]

This question already was there: #141

What exactly do you want from the library?

[savelichalex]

Oops, sorry for duplicate) I want smth like this:

import styles from './my-styles.css';
<Slider styles={styles} />

[just-boris]

Well, basically that means that slider component should accept the map of class names and use it instead of default names. Like the following:

const styles = {
  slider: 'slider__45ddfg',
  handle: 'handle__762dgs',
  track: 'track__24ddft',
  mark: 'mark__353gdfg'
  // and more...
}
<Slider styles={styles} />

Then we should always use those class names when they are provided or default names if not.
For me, it seems like a lot of work, don't know maybe it is even impossible.

@benjycui can answer.

[savelichalex]

Yeah, exactly what I want! Why do you think that this is impossible? I'm see only one problem - legacy code with slider

[jonathanwilke]

+1

[BentoumiTech]

There is a tool that helps components to be compatible with different approach for styling (Inline style, css modules ...) https://github.com/markdalgleish/react-themeable maybe it could help if it was implemented

[benjycui]

It's inconvenient to override styles for developers who don't want to use css-modules, if rc-slider(and other react components) use css-modules.

So, just add your own className to rc-slider and define rules with :global.

[savelichalex]

Hm, why this is not work for all users? They also can override this classNames with globals names

[just-boris]

The point is that users who don't use CSS-modules have to do extra setup work because they have to setup each className rather than just a common prefix.

@savelichalex Also if you know any other example of UI-component with seamless and CSS-modules-friendly class names, I'd be happy to look at it, and maybe get some ideas.

[BentoumiTech]

@just-boris I'm not sure that's what you're asking but you can look up the way this react autosuggestion component handle styling. It allows users who uses CSS-modules or not to have no extra work needed in order to style the component

[benjycui]

Yep, but it seems that react-themeable is unstable now.

[BentoumiTech]

@benjycui @just-boris just stumbled upon this thought it may interest you https://github.com/gajus/react-css-modules#extending-component-styles it allows to easily do what you mentioned in this comment #154 (comment)

[benjycui]

@Neophy7e Sorry, it's seems that your solution doesn't mention that how developers override rc-slider's style.

[benjycui]

And if developers who don't use css-modules have to do extra effort to override styles. Why can't developers who use css-modules do extra effort to override styles, and keep rc-slider simple.