StyleSheet and non-primitive DOM elements

[Richard Boenigk]

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! :)

[Nicolas Gallagher]

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)

[Richard Boenigk]

Thanks! Didn't occur to me to use things directly from react-native-web. That works perfectly.