css-modules 相关问题

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

CSS 模块样式被 CSP 阻止，而 style-src 指令没有不安全内联

我有一个使用 CRA 创建的 React 应用程序，我正在使用 CSS 模块来设置组件的样式。我创建带有 .module.css 前缀的 CSS 文件。示例：组件名称.module.css 然后我导入 CSS ...

css reactjs content-security-policy css-modules

回答 2 投票 0

是否可以使用 module.css/module.scss 引用常规类名？

这可能是一个愚蠢的问题，但我对于在 React 中使用 CSS/SCSS 模块还比较陌生。我有充分的理由询问，因为模块允许 CSS 的范围（这对于防止 CSS 很有用

reactjs sass css-modules classname

回答 1 投票 0

是否可以使用另一个 CSS 模块中的类？

一个 CSS 模块中是否可以使用另一个 CSS 模块中的类？问题是CSS模块正在做它自己的类名翻译，所以A.css中的.class将变成A-module--class-

css-modules

回答 5 投票 0

如何覆盖另一个CSS文件的样式

我有一个 css 文件 (main.css)，我想使用另一个 css 文件 (overrides.css) 覆盖它。但我在执行此操作时遇到问题，因为它们位于不同的文件中并且它们获得不同的哈希值。这是我...

css reactjs css-modules react-css-modules

回答 3 投票 0

如何将自动换行应用于 ANTD 选择标题和下拉项以更改元素的高度？

我希望我的 ANTD 标题/所选项目转到下一行并修改 Select 的高度。我研究过这个例子：https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/dem...

css reactjs antd css-modules

回答 1 投票 0

Remixjs - 如果使用 css 模块，元素没有类

Remix 似乎支持 CSS 模块。我已经安装了 @remix-run/css-bundle 并从中导入 cssBundleHref 并将其添加到 root.tsx 中的链接描述符中。从“...

css css-modules remix.run

回答 1 投票 0

如何使用 css-modules className 的 props 变量？

是否可以使用 props 变量作为 css-modules 类名？ // 组件.js 从“./Component.module.scss”导入样式 const 组件 = ({ 颜色 }) => 是否可以对 css-modules className 使用 props 变量？ // Component.js import styles from "./Component.module.scss" const Component = ({ color }) => <div className={`${styles.component}` `${styles.color}`> Component </div> // Component.module.scss .component { border: 1px black solid; } .red { color: red; } .green { color: green; } 然后我可以像这样使用Component： // App.js <Component color="red" /> <Component color="green" /> 并让两个Components分别为红色和绿色。我想你错过了一个括号 const Component = ({ color }) => { const cssColor = color; return ( <div className={`${styles.component}` `${styles[cssColor]}`}> Component </div> ) } 要使用 Component 级别的 CSS，您可以像使用加载器一样将其加载到 Webpack 中（参考）使用 webpack 时，您可以添加加载器，并将模块包含到其他的 webpack.config.js 中，以使 CSS 模块与 Webpack 一起使用。 test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' } 或者，您可以使用名为 classnames 的库 import styles from "./component.module.css"; const Component = ({ color }) => { const cssColor = styles[color]; return ( <div className={cssColor}> Component </div> ) } 我觉得这个操作效果更好以下作品： const Component = ({ color }) => { const cssColor = color; return ( <div className={`${styles.component}` `${styles[cssColor]}`> Component </div> ) }

reactjs css-modules react-css-modules

回答 3 投票 0

Material UI、CSS Modules、Next.js：为什么当 JS 禁用时样式不应用？

我正在开发我的第一个 Material UI - CSS 模块 - Next.js 项目。问题：当我在 Chrome 开发工具中禁用 JS 时，样式不会应用。现在，我不明白这是否有什么问题......

javascript css material-ui next.js css-modules

回答 2 投票 0

应用CSS模块类更简单/更干净的方法？

React（或样式组件）中的常规类命名约定： className =“该类全局类” VS CSS 模块中的类命名： className={`${styles.thisClass} 全局类`} 第二...

javascript css reactjs css-modules

回答 1 投票 0

如何访问不同文件中的css变量？

我创建了一个 global.css 文件，并在 :root 元素中声明了 css 变量。现在我想模块化地设计我的页面样式，为此，我需要访问诸如 (--primary-color: #000) ...