Добавление пользовательских css в шаблон реагирования - PullRequest
Новая
       6

Добавление пользовательских css в шаблон реагирования

0 голосов
/ 10 марта 2020

Я использую этот шаблон реакции https://www.creative-tim.com/product/light-bootstrap-dashboard-react/?partner=91096#

Я использовал компонент FormInputs из шаблона, теперь я хочу добавить свой пользовательский css в text-align: left, или цвет: синий, но я понятия не имею, как это сделать. 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"
     }
  ]}
/>

Это компонент FormInput в шаблоне ... 

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>;
  }
}

1 Ответ

2 голосов
/ 10 марта 2020

Существует несколько способов добавить css к компоненту. Самое простое - передать className, это сопоставлено со свойством html class. И импортируйте ваш css в файл, используя класс. Вот так: 

import './custom.css'

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

и пользовательский. css файл 

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

Другим подходом будет импорт модуля css, создайте файл с именем myCustomStyle.module. css

.fieldGroupContainer{
   //your css
}

И используйте его в своем компоненте так: 

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

.
.

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