Я работаю в приложении React, и у меня есть компонент, который отображает многочисленные теги span.Все теги имеют разные имена классов и получают все свои стили из связанной таблицы стилей.За исключением одного класса, который показан ниже как actions.По какой-то причине я не могу понять, как обновить этот класс с помощью таблицы стилей.
Если я зайду в инструменты Chrome Dev и изменит стиль на actions, изменения будут отображаться.Если я создаю объект customStyle в компоненте и применяю actions с атрибутом style, указывающим на этот объект, класс будет затем стилизоваться, как и ожидалось.
Однако, если я добавлю идентификатор кactions span tag и попытка стиля из связанной таблицы стилей, проблема возвращается, и ни один из моих пользовательских стилей не применяется к actions.Я пытался удалить все стили для класса actions и отображать только background-color из red, но даже это не займет.
Есть ли какая-то причина, по которой я могу отсутствовать, которая позволяет стилизовать все другие классы в этом компоненте с помощью таблицы стилей, но actions не может?
Заранее спасибо за любые ответы, и, пожалуйста,дайте мне знать, если есть какая-либо дополнительная информация, которую я могу предоставить.
Ниже приведен код компонента:
import React from 'react';
const ListHeaderComponent = (props) => {
return (
<span className='header'>
<span className='subheader'}>
<span className='content'>
Hello
</span>
</span>
<span className='subcontent'>
This is where the content goes
</span>
<span className='actions' id="what">
This is where the actions go
</span>
</span>
);
};
export default SplitViewListHeader;
Я тщательно просмотрел таблицу стилей, и на этот класс ссылаются только один раз.Ниже приведен пример кода, который не будет работать с классом, который не обновляется:
.actions {
background-color: red;
}