search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 100 forks source link

Impossible customization by CSS #63

Open MatsMaker opened 4 years ago

MatsMaker commented 4 years ago

Nice job. But needs to add customization styles from file styles. And not use only inline styles in the component props.

CesarGonzAndres commented 4 years ago

True... CSS customization is impossible... I'm facing the same issue

BorisL91 commented 4 years ago

Is there any update on this? I can only overwrite the default styles with the "!important" rule.

sabahath786 commented 4 years ago

I have same question, recently i started using this library, i would like to know how can we use separate css file for this component instead of inline css

santisiri commented 4 years ago

css styles is a must :(

markusenglund commented 3 years ago

Due to how the component is built, CSS can't be used for some properties. offColor, onColor, offHandleColor and onHandleColor have to be passed to the component as props so it can calculate intermediate color values. handleDiameter, height and width also has to be passed in as props since they are needed for the handle positioning calculation.

Overriding these values with !important can be used in some very specific cases but is generally not recommended right now.

Feel free to share specifics of what you want to do or ideas of how the component could be changed to better fit your needs.

Jordan1022 commented 2 years ago

I am curious how we can customize the handle itself besides onHandleColor? I would like to be able to add a border to the handle

artemis-prime commented 1 year ago

@Jordan1022 , this is a separate issue, no?

Jordan1022 commented 1 year ago

@artemis-prime yes you're right