标签: css-modules
在 next.js 中将 props 作为类名传递
我试图让我的每个应用程序页面的标题根据当前页面更改颜色。我如何努力实现这一目标：
<Header className="headerBitcoin"></Header>
我想要的是能够让 header 组件出现在所有 4 个页面上，然后只需将 className 更改为另一个 prop 即可更改背景，但不能更改其他任何内容。
以及标头组件本身
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={props.className}>aaaaa</div>
<div className={styles.row}>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
</div>{" "}
</div>
);
}
目前，选项卡和行的样式正在运行，但标题未应用其样式。
我检查了控制台，发现标头正在将 classNameheaderBitcoin传递给它，但是它下面的行的 className 为"Home_row__88lPM"
这是我第一次使用 next.js，我知道我做错了什么，因为这在 React 中有效。任何帮助，将不胜感激。
推荐指数
解决办法
查看次数
如何将Bootstrap变量导入SASS模块？
有没有办法在 SASS 模块中使用 Bootstrap SASS 变量？
例如，我的react/NextJS 项目中有文件index.module.scss。如何在 bootstrap 中使用 sass 模块变量？像这样的事情：
.hero{
color: $blue-200;
}
如果我只是在文件开头添加此导入：
@import '~bootstrap/scss/bootstrap.scss';
我收到此错误（来自 NextJS）：
让我注意到，当我在非模块 sass 文件中使用此导入（假设在文件 index.scss 中）时，它会起作用。但我需要（想要）使用 SASS 模块......
知道如何解决吗？
谢谢！
推荐指数
解决办法
查看次数
通过 CSS 模块将 SCSS 变量导出到 JavaScript/Svelte，而不会出现 lint 警告
我试图通过此处:export定义的功能与 svelte 组件共享 SASS 文件中定义的变量。
我知道这是可能的，因为这完全按照我的预期/想要的方式工作：
// styleExport.module.scss
$colors: (
red: #ff0000,
green: #00ff00,
blue: #0000ff
)
:export {
@each $color, $value in $colors {
#{$color}: $value;
}
}
// component.svelte
<div><!-- some markup--></div>
<script>
import importedColors from "../styleExport.module.scss";
console.log(importedColors);
/*
produces expected output on the page of:
{red: '#f00f00', green: '#00ff00', blue: '#0000ff'}
*/
</script>
这有效，但会生成警告：
警告：您可能不想在此处使用颜色值白色进行插值。它最终可能会呈现为白色，这可能会产生无效的 CSS。将颜色名称用作字符串或映射键时，请始终引用颜色名称（例如“白色”）。如果您确实想在此处使用颜色值，请使用 '"" + $color'。
当我更新styleExport.module.scss文件以使用他们请求的插值实现时：
:export {
@each $color, $value in $colors {
#{'"" + $color'}: $value; …推荐指数
解决办法
查看次数
scss模块（css module）：从其他scss文件导入
我目前正在将 sass 样式转换为使用css 模块以避免样式冲突。我的理解是，它会生成唯一的类名，这使得如果我想定位在不同文件中定义的另一个组件（例如子组件）会变得很困难。
假设我有一个组件Button，它从Button.module.scss文件导入：
// Button.js
import styles from "./Button.module.scss";
export const Button () => <button className={styles.button} />;
// Button.module.scss
.button {
// relevant styles.
}
现在我有了另一个组件ButtonGroup。假设我想让组中的按钮在它们之间有边距，我会有这样的东西：
// ButtonGroup.module.scss
.buttonGroup {
display: flex
&[class~=horizontal] {
& > .button:not(:first-child) { // still using the same class name
margin-left: 1rem;
}
}
&[class~=vertical] {
flex-direction: column;
& > .button:not(:first-child) { // still using the same class name
margin-top: 1rem;
}
}
}
请注意，我仍然使用 …
推荐指数
解决办法
查看次数
从 CSS 模块内访问全局类
我正在开发一个使用 ReactJS 和 CSS 模块的项目，每个 React 组件都有一个相应的 SASS 文件。
编写 CSS 时，每个类都会附加“三重下划线随机字符串”，例如.myClass__e7G3A
我的应用程序根据滚动位置将一个类（顶部”或“向下”）附加到主体标记，我希望我的组件对此做出响应。
我遇到的问题是，如果我在 CSS 模块中添加 或.top，.down那么它也会将唯一标识符附加到该类的末尾。
例如
JSX：
<div className={styles.main}>
Main content goes here.
</div>
呈现的 HTML：
<body class="top">
<div class="main___iZy2A">
Main content goes here.
</div>
</body>
SASS 文件：
.top .main {
margin-top: 0;
}
.down .main {
margin-top: 100px;
}
编译后的CSS：
.top___Gvf3S .main___iZy2A {
margin-top: 0;
}
.down___kpd3S .main___iZy2A {
margin-top: 100px;
}
期望的 CSS 结果：（并且.top没有.down唯一标识符） …
推荐指数
解决办法
查看次数
如何同时使用 css-modules 和 bootstrap？
我正在为我的项目使用电子反应样板，这个样板使用 css-modules 来设计样式。我在同一个地方使用引导程序和自定义样式时遇到问题。假设我有一个代码片段，例如，
<div className="container">
<div className="row custom-css">
// other codes...
</div>
在这种情况下，'row' 是一个引导类名，'custom-css' 是我自己的样式类名。请帮助我为这些问题找到一些解决方案，以便我可以一起使用css-modules和bootstrap ...
推荐指数
解决办法
查看次数
CSS 模块不起作用，React 16
我已经安装了 css-loader 和 style-loader。然后我配置了 webpack.dev 和 webpack.prod。我想 webpack 有问题，因为组件的语法并不复杂。该组件忽略样式。为什么？
包.json
"dependencies": {
"css-loader": "^0.28.11",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"style-loader": "^0.20.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject"`enter code here`: "react-scripts eject"
}
webpack.config.dev.js
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
webpack.config.prod.js
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
}, …推荐指数
解决办法
查看次数
如何用类和CSS模块覆盖样式？
集中、检查的课程似乎无法正常工作。我需要始终使用 !important 或使用material-ui 提供的jss 样式。例如：
https://codesandbox.io/s/css-modules-nvy8s?file=/src/CssModulesButton.js
CssModulesButton.module.css
.checkboxtest {
color: blue;
}
.checkboxtestworking {
color: blue !important;
}
CssModulesButton.js
import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";
export default function CssModulesButton() {
return (
<div>
<Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
<Checkbox classes={{ checked: styles.checkboxtestworking }}>
testasd
</Checkbox>
</div>
);
}
索引.js
import React from "react";
import { render } from "react-dom";
import { StylesProvider …推荐指数
解决办法
查看次数
“找不到模块‘./style’或其相应的类型声明”错误，typescript linter
我正在使用css-modules和构建一个 Gatsby 项目gatsby-config.js，我在其中解决了一个.scss扩展。
它构建并且工作得很好，但是我的 linter 不同意这一点，当我尝试导入这样的样式时，会引发错误“无法找到模块'./style'或其相应的类型声明.ts(2307) ”：
如果我从 js/ts/jsx/tsx 文件导入，则不会出现错误，但是当我尝试导入模块之类的样式（或图像）时，如果没有正确的扩展名，则会引发此错误。
我已经尝试在项目根目录的“typings”文件夹内将扩展声明为模块，例如“声明模块“*.scss””，但不起作用。
我的gatsby-config.js
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
module.exports = {
siteMetadata: {
title: 'Title from siteMetadata',
},
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
cssLoaderOptions: {
sourceMap: isDev,
modules: {
mode: 'local',
localIdentName: '[local]--[hash:base64:5]',
},
},
},
},
{
resolve: 'gatsby-plugin-alias-imports',
options: {
alias: {
'@containers': path.resolve(__dirname, 'src/containers'),
'@components': path.resolve(__dirname, 'src/components'),
'@pages': path.resolve(__dirname, 'src/pages'),
},
extensions: ['.js', …推荐指数
解决办法
查看次数
如何使用动态创建的 className 应用 CSS 模块
我刚刚开始学习CSS模块的使用。
我想做的是创建一个滑块，如何实现其功能是通过使用“activeSlide”、“nextSlide”和“lastSlide”动态更改我的 className。但是，我对 CSS 模块有一个问题，我不知道在 className 中放入什么内容以进行动态定位并同时应用与每个位置相对应的 CSS 属性。我如何使用 CSS 模块在一个 className 中实现这两种功能。
这是我的 index.jsx 文件，
import React, { useState, useEffect } from 'react';
import {FiChevronRight, FiChevronLeft} from 'react-icons/fi';
import reviewdata from './reviewdata';
import styles from './index.module.css';
export default function Review(){
const randomizer =()=>{
let number = Math.floor(Math.random()* (people.length))
return number;
}
const [people, setPeople]= useState(reviewdata);
const [index, setIndex] = useState(randomizer());
useEffect(()=>{
const lastIndex = people.length - 1;
if (index < 0){
setIndex(lastIndex);
}
if (index > lastIndex){
setIndex(0);
} …推荐指数
解决办法
查看次数
标签 统计
css-modules ×10
reactjs ×8
css ×5
javascript ×4
sass ×4
html ×2
next.js ×2
webpack ×2
bootstrap-5 ×1
material-ui ×1
svelte ×1
tslint ×1
typescript ×1