使用 Next js 时在 CSS/SASS 模块中使用 kebab-case CSS 类名

2023-11-23

我在 React/Next.js 中使用 SCSS 模块作为我的组件,但我不知道如何导入 kebab-case 类。

目前,我只是用驼峰命名法编写所有 SCSS 类,但这并不理想,因为这意味着我无法使用 SCSS 级联。

(我还在学习 React,我自己不太擅长制作动态组件,所以我现在坚持使用 React Strap。)

本质上,我想写

。公司标志

代替:

。公司标志

编辑:className={styles['company-logo']} 导致意外的令牌错误

这是我的组件:

import styles from './styles/Navbar.module.scss'

const NavComponent = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
          <img src="../ss-logo.png" alt="Logo" className={styles.companyLogo}/>
    </div>
  );
}

export default NavComponent;

还有我的 SCSS:

.companyLogo {
    height: 3rem;
}

className={styles['company-logo']}

应该是你想要的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Next js 时在 CSS/SASS 模块中使用 kebab-case CSS 类名 的相关文章

  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • window.open:是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • 如何在 javascript 中基于类型字符串创建新对象?

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • put方法中的Angularjs文件上传不起作用

    我有一个简单的待办事项应用程序 我试图在其中上传照片和单个待办事项 现在我已经创建了这个工厂函数来负责待办事项的创建 todosFactory insertTodo function todo return http post baseUr
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • Rails:找不到 JavaScript 运行时。有关可用运行时的列表,请参阅 https://github.com/sstephenson/execjs。 (ExecJS::运行时不可用)

    自从几周前 Dreamhost 升级了服务器以来 我的网站就被破坏了 我一直在努力解决它并取得了一些进展 但我仍然坚持希望是最后的问题 我在 Ruby 1 8 7 上使用 Rails 3 1 1 并收到来自 PhusionPassenger
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • 是否可以将请求标头添加到 CORS 预检请求中?

    我有一个从外部服务器 不是服务器 访问 API 的网站 为网站提供服务 通过简单的XmlHttpRequest 见下文 那个API 需要将用于访问服务的 API 密钥添加为请求标头 然而 正如这些CORS https developer m
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • Javascript 中 if 语句中的假值?

    过去两周 我在学校研究 JavaScript 的事情已经有一段时间了 而且我一直在做我的作业 在 Douglas Crockford 所著的 JavaScript The Good Parts 一书中 作者在第 11 页上列出了 if 语句
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃

随机推荐

  • 具有验证功能的独特 CD-KEY 生成算法

    我正在尝试创建一个独特的 CD KEY 放入我们产品的包装盒中 就像用户用来注册产品的标准软件盒中的普通 CD KEY 一样 然而 我们不销售软件 我们销售的是用于犯罪和医疗目的的 DNA 采集套件 用户将通过邮件收到带有 CD KEY 的
  • Angular.js 中哪些“东西”可以注入到其他东西中?

    我很难理解 Angular 中的依赖注入 所以我的问题是 谁能解释一下我们可以将哪些 类型 如控制器 工厂 提供者等 注入到其他类型中 包括相同 类型 的其他实例 我真正要找的是这张表 上面写满了 y n 对于具有相同行 列的单元格 这意味
  • 与组件相比,使用服务有哪些优点和缺点?

    在过去的几个月里 我一直致力于最新的 net 框架中的项目 我觉得在最新的 net 版本中 鼓励 服务 而不是组件 那是对的吗 我在silver light中看到过 我是silver light的初学者 所有的DB层操作都暴露为服务 不知道
  • 如何在Spring的CAS服务属性中正确设置服务URL

    当使用 Spring Security CAS 时 我总是遇到发送到 CAS 的回调 URL 即服务属性 的小障碍 我看过很多例子 例如this and this但它们都使用硬编码的 URL 甚至Spring 的 CAS 文档 典型的剪辑看
  • 我如何创建一个每次在 tkinter 中显示帧时运行的方法

    我有一个 GUI 应用程序 有几个窗口和按钮可以前进和后退 为此 我使用控制器并在每次窗口更改时将框架提升到顶部 这是我的控制器代码和典型框架 import Tkinter as tk python from tkFileDialog im
  • Django OperationalError:无法为连接创建新进程

    今天早上 在让 Django storages Boto 和 Django compressor 将静态文件放到 S3 上之后 我今天早上开始在生产环境中遇到此错误 尽管我不知道这是否相关 OperationalError could no
  • 如何持久存储目录中文件的值?

    我正在使用 C 在 VS2005 中开发 Windows 应用程序 在我的项目中 我生成 dll 并将它们存储在一个目录中 这些 dll 将被命名为 TestAssembly1 TestAssembly2 TestAssembly3 等 所
  • Node.js 连接 ftp 并下载文件

    你好 我下载了这个 npm 模块来连接到我的 ftp 节点FTPS 连接等级 var FTPS require ftps var ftps new FTPS host myhost username user password mypw p
  • Interlocked.CompareExchange 是否使用内存屏障?

    我正在阅读乔 达菲 Joe Duffy 的帖子读写易失性和时效性 我试图理解帖子中最后一个代码示例的一些内容 while Interlocked CompareExchange ref m state 1 0 0 m state 0 whi
  • 使用位置粘性删除不需要的空间

    我正在尝试使用position sticky在旋转的元素上 但我在顶部获得了额外的空间 此外 粘性元素必须停止的地方 在父元素的末尾 它会移到外面 请注意 我需要控制来选择粘性元素和左窗口侧之间放置的像素数 检查第二个屏幕截图以了解这两个问
  • Google 自定义搜索下一页

    我有以下代码 但我不知道如何打印下一页的链接 如何转到下一页 usr bin python2 4 coding utf 8 import pprint from apiclient discovery import build def ma
  • 如何将 BlueZ 配置为要求连接设备输入匹配的密钥?

    我正在尝试在嵌入式 Linux 设备上设置蓝牙 以便使用 SSP 模式 我的设备生成密码并在其显示屏上显示密码 并且要求远程端 例如用户的手机 输入匹配的密码才能使用才能成功配对 我编写 注册了一个代理 将其模式设置为 DisplayOnl
  • 为什么数组的 VarType() 总是返回 8204

    In the VarType MSDNMicrosoft VBScript 文档VarType它说的功能 粗体强调 备注 VarType 函数永远不会通过以下方式返回 Array 的值 本身 它总是添加到其他一些值来指示数组 特定类型 Va
  • 增量逻辑

    我试图更深入地了解后增量和预增量 但我有点坚持以下表达式 public static void main String args int i 0 i i i i 2 i i i 0 i i 2 i i i 0 1 3 2 1 i 0 6 1
  • 如何根据实时音频开发频谱分析仪?

    我正在开发一个应用程序 可以实时从麦克风获取源音频 无需文件存储 基本上 我使用 mRecorder new MediaRecorder mRecorder setAudioSource MediaRecorder AudioSource
  • 带有 SceneKit SCNProgram 的金属着色器

    我正在寻找一个可以在 SceneKit 和 SCNProgram 中工作的金属着色器 有人可以告诉我正确的方法声明 如何连接它吗 let program SCNProgram program vertexFunctionName myVer
  • 在 Android 上阻止网站

    有没有办法在 Android 设备上以编程方式阻止网站 我想要一个填充到持续运行的服务中的 URL 黑名单 当在受限条款下运行的用户打开浏览器时 它应该检查该黑名单 我想过修改hosts allow和hosts deny文件 但这些文件受到
  • 如何在 Node.js 上使用 Sequelize 进行连接查询

    我正在使用sequelize ORM 一切都很棒而且干净 但是当我使用它时遇到了问题join查询 我有两个模型 用户和帖子 var User db seq define User username type db Sequelize STR
  • 为什么不允许 auto 作为函数参数?

    From 这个问题 很清楚auto不能用作函数参数 我的问题是为什么返回类型被允许为auto但函数参数不是 auto function auto data DOES something Since there有很多好处auto进来c 1z
  • 使用 Next js 时在 CSS/SASS 模块中使用 kebab-case CSS 类名

    我在 React Next js 中使用 SCSS 模块作为我的组件 但我不知道如何导入 kebab case 类 目前 我只是用驼峰命名法编写所有 SCSS 类 但这并不理想 因为这意味着我无法使用 SCSS 级联 我还在学习 React