Change the way the styles are shared between the Explore page component
/* portals/paleo/src/Explore/SampleList.module.css */
.wrapper {
composes: wrapper from 'DomainList.module.css';
This is where things get rough with CSS Modules. If you compose from a CSS module that is imported by a React component, you may end up with style ordering issues. This is fine here, since you don't add any style declarations after composes
, but it's still a pattern to avoid. It's what I discovered and documented in https://github.com/silx-kit/h5web/blob/main/CONTRIBUTING.md#css-modules a few weeks ago.
You can merge as is for now, but it will be good to refactor this at some point. You have a few options:
-
SampleList.tsx
andDatasetList.tsx
could import styles fromDomainList.module.css
directly:import domainListStyles from '..../DomainList.module.css';
- You could move the shared
DomainList
styles into a dedicated utility file that is never imported by a React component, likeutils-explore.module.css
, and then compose from this file inSampleList.module.css
,DatasetList.module.css
andDomainList.module.css
. - You could perhaps create one or more "presentational" components, like
ExploreList.tsx
, to abstract away some of the duplicated JSX/CSS code fromSampleList.tsx
,DatasetList.tsx
andDomainList.tsx
.