mpx-rn-style-guide

CSS selector compatibility for Mpx React Native styling differs from mini-programs due to RN's underlying rendering engine. This guide details those selector support differences to help you resolve cross-platform styling conflicts and ensure consistent component rendering.

Cross-platform styling in Mpx React Native supports unit conversions for rpx, px, vw, vh, and percentages. This documentation explains how each unit is specifically handled and calculated within the RN environment to maintain visual consistency.

React Native does not support CSS Grid and Float layouts in Mpx cross-platform development. You should adopt Flexbox as the primary layout method to ensure your components render correctly and maintain compatibility across both RN and mini-program platforms.

Text overflow behaves differently in Mpx React Native because of underlying platform discrepancies in CSS property support. This guide provides specific best practices and solutions for handling text overflow, element hiding, and background properties correctly on RN.

The best way to write cross-platform Mpx styles is to understand RN and mini-program styling differences, use Flexbox for layout, and apply conditional compilation. This approach ensures seamless adaptation across platforms while addressing specific RN constraints.

You can use CSS transforms and animations in Mpx React Native output, but they require specific cross-platform adaptation strategies. This documentation outlines the supported properties and provides guidance on resolving implementation differences for RN targets.