Why is usePrefix overwritten by settings in carbon-components?

[TastyDucks]

Package

carbon-components, carbon-components-react

Browser

Chrome, Firefox

Package version

@carbon/[email protected], [email protected], [email protected]

Description

Components are not receiving the expected class prefix:

If I'm reading correctly, this may be caused by the prefix set in carbon-components here.

Perhaps the order in which the packages are required causes the prefix in carbon-components to override what's done in react/prefix.js?

CodeSandbox example

https://codesandbox.io/s/upbeat-ganguly-k6phd?file=/src/index.js

Steps to reproduce

I couldn't load @carbon/[email protected] in the sandbox, but that does illustrate components prefixed with bx.
In a fresh repo with create-react-app:

App.scss:

@use '@carbon/react';

App.tsx:

import './App.scss' // This loads the cds styles as expected
import { AnyComponent } from '@carbon/react'
export const App = () => <AnyComponent/> // This component will have a bx-prefixed className applied.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Hey @TastyDucks - sorry for the confusion here! @carbon/react is in preview. It's part of the current beta for our v11 release and is intended to replace carbon-components and carbon-components-react.

@carbon/react forwards styles from @carbon/styles and it also includes the same components (with some v11 updates) from carbon-components-react.

This is outlined in more detail in the v11 migration guide (also still in beta and a WIP)

So overall, the fix here is to either use @carbon/react exclusively for components and styles, or use carbon-components with carbon-components-react.

I'm not sure what's up with the versioning on codesandbox. I was able to make a fork of your codesandbox with the newer 0.6.0 version of @carbon/react:
https://codesandbox.io/s/flamboyant-butterfly-e7n34?file=/package.json

[TastyDucks]

Thank you for the quick reply.
To clarify, in the project I am working on I am only using @carbon/react.
I made a new create-react-app and was able to get classes prefixed with cds -- so there must be something wrong with my main build environment. (Removing node_modules + package-lock.json and reinstalling packages didn't help, which was what led me to believe there may be a bug.)