在我们的全局css文件中,我们可以这样编写css

:root{
    --orange:#e67e22;
    --black:#333;
    --light-color:#777;
    --border:.1rem solid rgba(0,0,0,.2);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

section{
    padding:2rem 7%;
}

但是我们不能在我们的组件模块中编写这个css.css.我需要写.section而不是section,但如果我写的话,我的风格会被打破.节而不是我的组件模块中的节.css.有没有办法在我的模块中编写这些css.像全局css一样的css?

在我们的组件中应用自定义样式(如{style.ClassName})也很痛苦和耗时.是否有任何简单或快速的方法可以在我们的组件中应用自定义样式?

推荐答案

您可以做的是将特定组件中的所有代码封装在模块类中.类似这样:

<div className={style.container}>
 {/* All of your code comes here */}
 <section>
  {/* Your section code */}
 </section>
</div>

然后在css模块的容器类中,可以执行以下操作:

.container section {
  padding: 20px; // or the styles you want to apply
}

这将把样式应用于.container css模块类中的all of the sections.

对于第二个问题,如果您不想应用css模块,我建议您try 其他样式方法,例如styled-components.

Javascript相关问答推荐

在时间轴完整日历中显示日期标题

为什么getRecord()会因为与_logger相关的错误而失败?(使用Hedera SDK)

react 路由加载程序行为

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

当作为表达式调用时,如何解析方法decorator 的签名?

用于编辑CSS样式的Java脚本

使用GraphQL查询Uniswap的ETH价格

使用带有HostBinding的Angular 信号来更新样式?

JavaScript不重定向配置的PATH

是否可以在Photoshop CC中zoom 路径项?

自定义确认组件未在vue.js的v菜单内打开

在SHINY R中的嵌套模块中,不能使用Java代码

Next.js中的服务器端组件列表筛选

如何用javascript更改元素的宽度和高度?

未捕获语法错误:Hello World中的令牌无效或意外

Next.js无法从外部本地主机获取图像

使用CEPRESS截取时,cy.Wait()在等待5000ms的第一个路由请求时超时

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

使用静态函数保存 node 前的钩子

在执行console.log(new X())时记录一个字符串