CODEWITHSUNDEEP
reactjsreact-bootstrap
Vishal Kank
Vishal Kank

Reputation: 41

Adding custom css in react template

I'am using this react template https://www.creative-tim.com/product/light-bootstrap-dashboard-react/?partner=91096#

I have used FormInputs component from the Template now I want to add my custom css to text-align: left, or color: blue, but I have no clue how to get it done. B

<FormInputs 
    ncols = {["col-xs-6" , "col-xs-6"]}
    properties = {[
     {
       label : "Email address",
       type : "email",
       bsClass : "form-control",
       placeholder : "Email"
     },
     {
       label : "Password",
       type : "password",
       bsClass : "form-control",
       placeholder : "Password"
     }
  ]}
/>

This is the FormInput component in the template...

import { FormGroup, ControlLabel, FormControl, Row } from "react-bootstrap";

function FieldGroup({ label, ...props }) {
  return (
    <FormGroup>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
    </FormGroup>
  );
}

export class FormInputs extends Component {
  render() {
    console.log(this.props.properties)
    var row = [];
    for (var i = 0; i < this.props.ncols.length; i++) {
      row.push(
        <div key={i} className={this.props.ncols[i]}>
          <FieldGroup {...this.props.properties[i]} />
        </div>
      );
    }
    return <Row>{row}</Row>;
  }
}

Upvotes: 0

Views: 782

Answers (1)

Luis Gurmendez
Luis Gurmendez

Reputation: 664

There are several ways to add css to a component. The simplest is passing a className this is mapped to a html class property. And import your css to the file using the class. Like so:

import './custom.css'

.
.
<div key={i} className='field-group-container'>
   <FieldGroup {...this.props.properties[i]} />
</div>

and the custom.css file

.field-group-container{
   // your css
}

Another approach would be importing a css module, create a file named myCustomStyle.module.css

.fieldGroupContainer{
   //your css
}

And use it in your component like this:

import css from './myCustomStyle.module.css'

.
.

<div className={css.fieldGroupContainer}>
...
</div>

Upvotes: 2

Related Questions