Стили не работают через стилизованные компоненты
Я пытаюсь добавить цвет фона через стилизованный компонент.
Если добавить стили с помощью атрибута style = {}, он будет работать, как ожидалось, но если я добавлю тот же стиль в свой файл стилизованного компонента, он не будет работать.
//this is working
<MyStyle style = {{backgroundColor: '#fff' }}>
//some component here
</MyStyle>
//This is not working.
export const MyStyle = styled.div`
background-color: ‘#fff’;
`;
Может ли кто-нибудь указать мне здесь, что мне здесь не хватает?
Ответы 2
Вам не нужно заключать #fff в одинарные кавычки
export const MyStyle = styled.div`
background-color: #fff;
`;
ИЗМЕНИТЬ:
Если есть переопределяющие стили CSS, которые делают фон вашего div еще не белым, и вы не можете их найти, просто добавьте !important к этому стилю.
export const MyStyle = styled.div`
background-color: #fff !important;
`;
Что касается проблемы поиска существующих стилей CSS, которые могут переопределять ваш предпочтительный стиль, взгляните на это: https://www.styled-components.com/docs/advanced#existing-css
Если он по-прежнему не работает, возможно, у вас есть стили CSS, которые переопределяют этот стиль. Если вы знакомы с «балльной системой» в CSS, вы должны были знать о проблеме.
В первом примере просто используется встроенный стиль реакции, для этого вам не нужны стилизованные компоненты.
В коде во втором примере вам нужно удалить кавычки вокруг цвета, например:
//This is not working.
export const MyStyle = styled.div`
background-color: #fff;
`;
Стилизованные компоненты используют синтаксис css, который, в отличие от синтаксиса json, не имеет кавычек вокруг имен параметров, названий цветов и т. д.
Спасибо. Убраны одинарные кавычки вокруг названия цвета. Тем не менее, это не работает.
У вас есть плагин babel? (редактировать, неважно, это не должно его сломать)
Спасибо. Убраны одинарные кавычки вокруг названия цвета. Тем не менее, это не работает.