I cannot see how react encourages you to forget :hover in CSS.
<Button styles={[...]}
onPress={() => setState('active')} />
const styles = StyleSheet.create({
active: { backgroundColor: 'purple' }
})
<Button styles={[...]}
onPress={() => setState('active')}
onHover={() => setState('hover')} />
const styles = StyleSheet.create({
active: { backgroundColor: 'purple' }
hover: { backgroundColor: 'blue' }
})
const styles = StyleSheet.create({
button: {
'&:hover': { backgroundColor: 'blue' }
}
})
Another familiar case is not having direct control over a parent/child component's styles, only their state, making it impossible to do it with CSS. Not exposing `style` is very common in component libraries, and using CSS-in-JS means you can't easily target them with CSS selectors.
The fact that React is a plain view library and doesn't provide / interfere with the rest of your tooling is precisely the problem in my opinion, and does not exempt it from the resulting mess. The lack of standards has led to the proliferation of a thousand supporting libraries, all special in their own way, in turn making the definition of 'good practices' nearly impossible; it also gives way to flavour-of-the-month development practices, where popularity (and not necessarily quality/fit) determines what libraries most people use. Similar discussions can be had around SSR, accessibility, bundling, compiling, code splitting, animations, component APIs, state management, persistence, fetching data, and so on.
All they are are just fancy wrappers around putting more or less the same straight up CSS into the page. So you still use :hover or :active or whatever to do the appearance states in straight up css.
I still fail to see how React encourages adding event handlers to add hover appearances. A developer who thinks that's what to do with React was going to fuck that up with any technology.
const Header = styled('header')`
font-family: ${({ theme }) => theme.fonts.header};
color: ${({ theme }) => theme.colors.primary};
backgroundColor: ${({ theme }) => theme.colors.primaryBackground};
`
I'd note out that this feature is also so edgy that the pushed argument shouldn't even occur that much.
It would be like "Oh hei, I need to dig up that super edgy star shaped hole using that shovel so I'm using it that way. Oh see, when I use it that way i'm inclined to do X. Therefore my shovel is encouraging me to do X."
I understand that frameworks might push you in a certain direction, but not this for React.