StyleSheet and non-primitive DOM elements
rxb opened this issue · comments
What is the best way to use StyleSheet to style non-primitive web DOM elements?
From what I've gathered, react-primitives is using StyleSheet from react-native-web. It's possible to implement most things out of the basic react-primitives (View, Image, Text, Touchable) + accessibilityRole, but sometimes you still need to use the DOM elements like input or textarea.
React DOM doesn't accept StyleSheet objects. It does seem like it's possible to do this:
<input type="text" style={StyleSheet.flatten(styles.input)} />
But you miss out on the css optimization of the generated classes and there are some inconsistencies between react style and react-native style (line-height as a multiplier vs pixel value).
It looks like the react-primitives have their styles processed as part of applyPrimitiveMethods
, but I haven't figured out how to use that in my own components. react-native-web has a createDOMElement
function, but I don't think that's included in react-primitives.
Any ideas or guidance would be much appreciated! :)
If you need createDOMElement
you should import directly from react-native-web
. react-primitives
is for components that can be built on a specific, platform-agnostic API surface. If you need to drop down to HTML elements (built-in or custom) then you're making a web-specific implementation (e.g., MyComponent.web.js
) and from within that file you can safely import from react-native-web
and also react-dom
.
(BTW, React Native for Web also provides TextInput
, which I think could be exported from react-primitives
)
Thanks! Didn't occur to me to use things directly from react-native-web. That works perfectly.