С HTML всё ок (если нет возможности задать CSS-класс , то всё ок), JSX не смотрел, а в CSS смутила вот эта строка:
&.label_notification_error {
margin: 4px 0px 0px 20px;
}
Смешиваются стили .form-input__label и label_notification_error. Эту проблему решит каскад:
.form-input {
&__label {
margin-bottom: 4px;
}
}
.label {
&_notification_error {
margin: 4px 0px 0px 20px;
}
}
Если же такой margin нужен только у этой конкретной формы — или вынести его в инлайн-стили, или сделать отдельный модификатор, но для .form-input__label (например,
.form-input_view_super-form-with-notification-margin .form-input__label_notification_error {
margin: 4px 0px 0px 20px
}
)
