Имена классов не работают должным образом в React 16

Question

Я хочу применить этот classnames объект моего ввода, в react 16 проекте без webpack инструмента.

const fieldClassName = classnames(
      formControlStyles.field, 'form-control'
)

Класс управления формой от начальной загрузки каквы можете заметить.

И класс .field - это мой класс для переопределения некоторых атрибутов.

Ниже показано, что form-control переопределяет класс .field, и я хочу, чтобы произошло обратное.

Answer 1

Нет никакого отношения к React, это зависит от того, как вы пишете свой CSS.Например:

.class1{
 color: red;
 // some property
}

.class2{
 color: green;
 // some property
}

И элемент div

<div class="class1 class2"> Text </div>

Например, здесь вы написали class2 после class1.Он примет свойство class2, поэтому текст будет отображаться зеленым цветом.

    .class2{
      color: green;
      // some property
    }

   .class1{
      color: red;
      // some property
    }

И элемент div

<div class="class1 class2"> Text </div>

Например, здесь вы написали class1 после class2.Он примет свойство класса 1, поэтому текст будет отображаться красным цветом.

Answer 2

После долгих поисков и запросов я обнаружил, что обычные файлы таблиц стилей должны располагаться поверх файла index.js, чтобы он не конфликтовал с classnames управляемыми стилями