Topic: How do I change the color of the check box?
Denis Correia asked 7 years ago
<InputSwitch></InputSwitch>
Marta Szymanska staff pro premium answered 7 years ago
Denis Correia commented 7 years ago
Does this work in the React version?Denis Correia commented 7 years ago
I'm trying something like <div> <div><divclassName="switch teal-switch"></div> <div><label></div> <div>Inativo</div> <div><inputtype="checkbox"></input></div> <div><spanclassName="lever"></span></div> <div>Ativo</div> <div></label></div> <div></div></div> </div> but it does not work.Jakub Strebeyko staff answered 7 years ago
Hi there Denis,
Yes, the <InputSwitch>
component makes up exactly the markup you mention. Please note, though, that the CSS necessary to have it change color is not part of our essential package. It means you have to do it yourself, and best way to do it would be through an additional style sheet imported to an interface your working on.
1. Copy the CSS (or particular colors you are fond of) from here and paste them into a CSS file under a name of your choosing (for clarity's sake let's call it SwitchColors.css
for now). Place the file into the same directory where the .js
file with <InputSwitch>
is.
2. Add the following line to the .js
file, best beneath other imports you probably already have there:
import './SwitchColors.css';
3. Pass in the color class you want, like
<InputSwitch className="warning-switch" checked={this.state.switch} onChange={this.handleSwitchChange}></InputSwitch>
4. Enjoy the colorful switches, they are the bomb!
Hope it helps!
With Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No