CODEWITHSUNDEEP
reactjsmaterialize
Sreeraj Karichery
Sreeraj Karichery

Reputation: 198

How to color label on radio-button on react-materialize

How do I color the label of a radio button created using react-materialize Input component?

Sample code of the radioButtons are something like this?

<div className="col s2 offset-s3">
    <Input className="with-gap" label="List" name="homePageSearchRadio" type="radio" value="group"/>
</div>
<div className="col s2">
    <Input className="with-gap" label="User" name="homePageSearchRadio" type="radio" value="user"/>
</div>
<div className="col s2">
    <Input className="with-gap" label="data" name="homePageSearchRadio" type="radio" value="data"/>
</div>

I tried adding the style property, but that is actually getting added to input element in html. Can someone help me here?

Thanks, Sreeraj

Upvotes: 0

Views: 677

Answers (2)

Piyush Dhamecha
Piyush Dhamecha

Reputation: 1515

In react-materialize there is no option to set class for input > radio > lable.

So i have fork the repo and updated https://github.com/piyushdhamecha/react-materialize, added labelClassName to Input component

npm install --save https://github.com/piyushdhamecha/react-materialize

You can use like:

<Input labelClassName="radioLabel" className="with-gap" label="List" name="homePageSearchRadio" type="radio" value="group"/>

Upvotes: 1

Maulana Prambadi
Maulana Prambadi

Reputation: 1043

You should create a camel case the classname to the className this reference for styling in reactjs https://facebook.github.io/react/docs/dom-elements.html

and this for reactmateralize reference https://react-materialize.github.io/#/forms

<div className="col s2 offset-s3">
    <Input className="with-gap" label="List" name="homePageSearchRadio" type="radio" value="group"/>
</div>
<div classname="col s2">
    <Input className="with-gap" label="User" name="homePageSearchRadio" type="radio" value="user"/>
</div>
<div classname="col s2">
    <Input className="with-gap" label="data" name="homePageSearchRadio" type="radio" value="data"/>
</div>

Upvotes: 0

Related Questions