Default Style Replacing Custom `sx` Style Props

[rizaldirnm]

Its look like default style replaced sx style props.

import { View, Text } from "dripsy";

export function HomePage() {
  return (
    <View sx={{
      backgroundColor: 'blue'
    }}>
      <Text>123</Text>
    </View>
  );
}

The result 123 should have background-color blue but turns out still black because there is default classname. (see the screen shoot)

• Dripsy: 4.3.3
• NextJS: 13.5.2
• @expo/next-adapter: 5.0.2

next.config.js

const { withExpo } = require("@expo/next-adapter");

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reanimated (and thus, Moti) doesn't work with strict mode currently...
  // https://github.com/nandorojo/moti/issues/224
  // https://github.com/necolas/react-native-web/pull/2330
  // https://github.com/nandorojo/moti/issues/224
  // once that gets fixed, set this back to true
  reactStrictMode: false,
  transpilePackages: [
    "react-native",
    "react-native-web",
    "@expo/html-elements",
    "solito",
    "dripsy"
  ],
};

module.exports = withExpo(nextConfig);

What did I wrong ?

Thank you in advance

[nandorojo]

well that is super weird

[nandorojo]

it seems like a react native web problem. does importing from react-native and using the style prop fix it?

[nandorojo]

i also wonder if an older next.js would work

[rizaldirnm]

export function StylesProvider({ children }: { children: React.ReactNode }) {
  useServerInsertedHTML(() => {
    // @ts-ignore
    const sheet = StyleSheet.getSheet();

    console.log(sheet)

    return (
      <style
        // dangerouslySetInnerHTML={{ __html: sheet.textContent }} // --> I comment this
        id={sheet.id}
      />
    );
  });

  return <DripsyAppProvider>{children}</DripsyAppProvider>;
}

when I comment:

// dangerouslySetInnerHTML={{ __html: sheet.textContent }}

Its work....

Is there any idea what side effect when I comment this? :D

[nandorojo]

oh you’re using the app dir for this right?

[nandorojo]

could you try pages folder? dripsy won’t work well with the app dir

[rizaldirnm]

Oohh yes. No issue if using Page Router.

Thankyou