Комментарии 17
Забавно, что все эти css-in-js ничего не знают про, собственно, Cascading Style Sheets, а единственная либа, которая про это знает, в топ не попала: https://mol.hyoo.ru/#!section=docs/=xwq9q5_f966fg
И styled и linaria прекрасно работают с каскадностью.
Действительно, каскад там есть, но кривой - по именам блоков, но не элементов, в терминах БЭМ.
Там каскад по имени сгенерированного класса. Примерно как в css-modules.
Ну вот в каунтере, как стилизовать кнопку инкремента так, чтобы не задеть остальные кнопки на любой глубине вложенности?
import styled from 'styled-components'; // or @linaria/react
const Counter = () => {
...
return <div>
...
<button onClick...>Styled button</button>
</div>
};
const CounterWithStyledButton = styled(Counter)`
button {
....
}
`
Примерно так
Это стилизует все кнопки подряд, а не одну конкретную.
Это стилизует кнопки внутри компонента. Если вам нужно одну кнопку компонента, то нужно было так и писать. Будет соответственно
import styled from 'styled-components'; // or @linaria/react
...
const MyBytton = styled.button`
...
`;
...
const Counter = () => {
...
return <div>
...
<button onClick...>Unstyled button</button>
<button onClick...>Unstyled button</button>
<MyBytton onClick...>Styled button</MyButton>
</div>
};
const CounterWithStyledButton = styled(Counter)`
${MyBytton} {
....
}
`
Я именно так и написал - надо стилизовать конкретную кнопку, не перелопачивая код сторонних компонент. В вашем же примере нужен их глубокий рефакторинг.
Вы про какой именно глубокий рефакторинг?
Про оборачиваение в styled или что?
Если про styled, то так тоже можно:
import { css } from '@linaria/core';
const counterClassName = css`
.another_styled_button {
....
}
/* Вот еще примеры */
&::after {
/* .thing::after */
content: '🌟';
}
h3 {
/* .thing h3 */
color: tomato;
}
.code {
/* .thing .code */
color: #555;
}
& + & {
/* .thing + .thing */
background: yellow;
}
&.bordered {
/* .thing.bordered */
border: 1px solid black;
}
.parent & {
/* .parent .thing */
color: blue;
}
`
const Counter = () => {
...
return <div>
...
<button onClick...>Unstyled button</button>
<button onClick...>Unstyled button</button>
<button onClick... className="another_styled_button">Styled button</button>
</div>
};
По имени класса сматчатся и одноименные элементы других компонентов же.
всё то же самое умеют css-modules.
css в коде - то еще удовольствие.
Странные библиотеки из прошлого.
Сейчас это tailwind. Как никак на дворе 2024 год.
Чего только не придумают — лишь бы CSS не учить…
CSS в JS - это зло ;-)
Это как гранатой гвозди заколачивать.
На заре веб программирования всякой дичи хватало. Но со временем выработались "хорошие практики" и из мира хаоса многое стало упорядочиваться. Наконец-то стали отделять "мух от котлет". И вот спустя 25 лет "новое поколение" сново наступает на те же грабли. Всё развивается по спирали :-)))
Мой ТОП-5 лучших CSS-in-JS решений