создать имя класса с несколькими классами CSS не работает

Question

У меня есть следующие стили CSS в файле CSS

.paddingRight.tiny {
    padding-right: 0.5em;
}

.paddingRight.small {
    padding-right: 1em;
}

.paddingRight.medium {
    padding-right: 1.5em;
}

.paddingLeft.tiny {
    padding-left: 0.5em;
}

.paddingLeft.small {
    padding-left: 1em;
}

.paddingLeft.medium {
    padding-left: 1.5em;
}

И HTML-код выглядит так, как показано ниже,

<div className="paddingRight small paddingLeft tiny">
    //Some content goes here
</div>

Если я упомяну имя класса, как это, CSS не применяется должным образом.

ожидаемый класс css:

paddingRight.small and .paddingLeft.tiny

Фактический класс:

paddingRight.small and .paddingLeft.small 

Почему это происходит?

Answer 1

Синтаксис className предназначен для кода JSX, языка JavaScript, который для простоты выглядит как HTML для разработчиков, но они НЕ одинаковы. Я не верю, что это приведет к ошибке в консоли, но не будет отображать стили. Для HTML вы должны использовать синтаксис class. Вы также не можете иметь . в имени класса, потому что это идентификатор класса. Вы обычно используете - или camelCase.

Я добавил красный класс фона, чтобы показать вам, как работает код.

.red {
    background-color: red;
}

.paddingRight-tiny {
    padding-right: 0.5em;
}

.paddingRight-small {
    padding-right: 1em;
}

.paddingRight-medium {
    padding-right: 1.5em;
}

.paddingLeft-tiny {
    padding-left: 0.5em;
}

.paddingLeft-small {
    padding-left: 1em;
}

.paddingLeft-medium {
    padding-left: 1.5em;
}

<div class="red paddingRight-small paddingLeft-tiny">
    <p>Some content goes here...</p>
</div>

Answer 2

Как у вас в html у вашего div есть 4 разных класса. изменение которого изменит все. вам следует попробовать:

<div className="paddingRight">
 <div className="small">
 //something
 </div>
 <div className="tiny">
 //something
 </div>
</div>
<div className="paddingLeft">
 <div className="small">
 //something
 </div>
 <div className="tiny">
 //something
 </div>
</div>