bug: Ionic styles not available in custom React components with prod build

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

We have 2 applications. We also created our own UI library of components (we store it in a separate repository and use it as an npm dependency). In UI library we use ionic components, add the styles we need and use these custom components in our applications. In applications and the UI library, we use React v17.0.2.

The problem is that if we use a component from our UI library in one of our applications, styles for ionic components disappear after build application in production. Global and additional ionic styles in applications are imported. If we run the application in development mode, everything is good with the styles. But as soon as the project is built, the styles that ionic uses disappear.

Expected Behavior

We expect that by using our custom components based on ionic components, we will be able to use them in our applications and their styles will be saved after the project is built in production.

Steps to Reproduce

Example UI component:

const SegmentWrapper = styled(IonSegment)'
    min-height: 32px; 
    --background: #d6f2f9;
';

export const SegmentLabel = styled(IonLabel)'
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #1d201f;
';

type SegmentType = {
    id: string;
    label: string;
};

type SegmentProps = {
    segments: SegmentType[];
    selected?: string;
    onChange?: (id: string) => void;
};

const Segment: FC<SegmentProps> = ({ segments, selected, onChange }) => {
  return (
    <SegmentWrapper
      scrollable
      mode="ios"
      value={selected}
      onIonChange={(e) => onChange?.(e.detail.value as string)}
    >
      {segments.map((item) => (
        <IonSegmentButton key={item.id} value={item.id}>
          <SegmentLabel>{item.label}</SegmentLabel>
        </IonSegmentButton>
      ))}
    </SegmentWrapper>
  );
};

export default Segment;

In application we use this component:

const segments: SegmentType[] = [
  { id: 'feed', label: 'Tab 1' },
  { id: 'info', label: 'Tab 2' },
];

<Segment
  segments={segments}
  selected={selectedSegment}
  onChange={setSelectedSegment}
/>

If we run npm run start we will see that the component is displayed as needed and :host styles are applied:

But if we run npm run build and open production build we will see that our custom styles are present but ionic component styles are gone:

Code Reproduction URL

No response

Ionic Info

Additional Information

Our UI library was tried to build in different ways: with rollup, only with TS, with react-script. But it doesn’t affect the build production application.

Noticed only one feature. If in our application, in any place, we use the ionic component and in another place use our custom component, then the styles do not disappear and everything is OK. But that’s not what we want, we want to use our UI

[stasdre]

Thanks. It’s really work after added setupIonicReact in our UI lib. Thank you fore help!

[liamdebeasi]

Thanks. The problem appears to be that you are not calling setupIonicReact in mindly-test-ui, causing the mode to not be setup correctly. Can you add that to mindly-test-ui and let me know if that resolves the issue?