css-modules 相关问题

CSS Modules是一个预处理器，允许在CSS代码中模拟本地范围和控制依赖关系。

假设我们有一个像这样的第三方 CardComponent 这是正文中的文字这会以纯 HTML 形式呈现假设我们有一个第三方CardComponent，就像这样 <Card title="This is a title in the header">This is text in the body</Card> 这会以纯 HTML 形式呈现 <div class="Card"> <div class="CardHeader"></div> <div class="CardBody"></div> </div> 我正在使用 css 模块进行样式设置（在本例中为 scss）。 .customCard { .CardBody { color: red; } } 然后将类添加到Card import styles from ... ... <Card className={styles.customCard} ...>...</Card> 上面将不起作用，因为它为 CardBody 创建了一个生成的类，如 CardBody_sjkdh43。有没有办法在模块中选择非生成的类名？或者这只能以旧时尚的方式使用样式表？演示沙盒答案是使用 CSS 模块中的 :global() 选择器。了解更多信息：异常 - CSS 模块代码示例： <div class={styles.myClass}> <SomeComponentWithOwnCss /> </div> 输出： <div class="myClass_s4jkdh3"> <div class="SomeComponentWithOwnCss"></div> </div> 和CSS： .myClass div:global(.SomeComponentWithOwnCss) { background-color: red; } 此处的工作示例：codesandbox 您可以尝试使用 SCSS 来获得更方便的方法： .parent :global { .non-cssmodule-class { color: red; } } <div className={styles.parent}> <div className="non-cssmodule-class" /> </div> 输出： <style> .filename-parent__7MR41 .non-cssmodule-class { color: red; } </style> <div class="filename-parent__7MR41"> <div class="non-cssmodule-class"></div> </div>

css css-modules react-css-modules

回答 2 投票 0

如何从 CSS 模块将 CSS 作为 Next.js 中的 prop 传递

我正在尝试在名为 Cards 的组件上应用 CSS。我想在 #image_div div 上应用 CSS。我的代码如下：团队.模块.css： .grid_container{ 显示：网格；网格模板co...

javascript css reactjs next.js css-modules

回答 1 投票 0

将 React 组件与 css 模块结合使用，有没有办法在悬停时影响父组件的子组件类（删除过一次或两次的表兄弟）？

代码布局基本如下。 //ComponentA.tsx 从“./ComponentA.module.css”导入样式代码布局基本如下。 //ComponentA.tsx import styles from './ComponentA.module.css' <ComponentA className="styles.componentA"> <div className="styles.componentB"> <ComponentC> </ComponentA> //ComponentA.module.css .componentA { } .componentB { } //ComponentC.module.css import styles from './ComponentC.module.css' export const ComponentC: FC<Props> = ({settings}) => { return ( <div> <div className="styles.componentD" /> </div> ) } //ComponentC.module.css .componentD { } 当 className 为 styles.componentD 的 div 悬停时，我希望带有 className="styles.componentB" 的 div 更改其样式。我已经尝试了各种方法，例如.componentA:has(.componentC:hover) ~ .componentB {}中的ComponentA.module.css，但无济于事。除了 onMouseOver 和 onMouseOut 之外，还存在哪些通过 Prop Drill 或 Redux 进行状态管理的解决方案？当另一个组件中的特定元素悬停时影响同级组件的样式，您可以使用 CSS 变量和相邻同级选择器。 ComponentA.module.css： .componentA { --hovered: 0; } .componentA:hover { --hovered: 1; } ComponentC.module.css： .componentD:hover ~ .componentB { background-color: var(--hovered, 0) ? red : initial; } 此方法使用 CSS 变量在组件和相邻同级选择器之间传递悬停状态信息，以将样式应用到目标组件

css reactjs css-modules

回答 1 投票 0

如果 React 项目仅作用于本地组件，为什么它会继承这个 css 模块作为它的背景？

我创建了一个 React 组件，由于某种原因，整个网站继承了我放入其中一个 CSS 模块的主体定义。我尝试过使用和不使用本地标签，我有一种感觉......

javascript css reactjs css-modules

回答 1 投票 0

Vite build 生成不同的css模块类

Vite构建过程中生成的index.js文件中是否可以配置CSS模块类名？我正在使用多个主题和一个单条目 JS 文件。目前，这是...

html css vue.js vite css-modules

回答 1 投票 0

如何在 Nextjs 中对 CSS 类名进行哈希处理？

如何在 Nextjs 的 Webpack 配置中编辑 css-loader 的 localIdentName 字段，以便可以散列/隐藏/混淆 css 类名？下面的例子来自《纽约时报》。注意班级...