由于我来自Vuejs的背景,现在从Nextjs开始,我想为我的每个组件(如- Navbar)设置css的范围,而不是在Globas.css中使用它,有没有办法做到这一点?我使用顺风css库旁边。我确实尝试过为我的每个组件(如Angular)制作单独的css文件,并将其导入到我的每个组件中,但它并没有像预期的那样工作。这是我当前的文件夹结构的样子-x1c 0d1x的数据
rn0zuynd1#
你可以使用CSS Modules或styled-components(如emotion)来将你的css范围扩展到React中的组件。我不认为你会需要,如果你使用顺风,因为它服务的实用程序类。
1wnzp6jl2#
您需要使用CSS模块。创建your-component.module.scss或css文件并导入,如
your-component.module.scss
css
import styles from './your-component.module.scss'; ... <div className={styles.yourClass}> ... </div> ...
字符串既然你来自Vue,CSS-in-JS可能更适合你。你有很多选项,如StyledComponents、Linaria、Emotion等。
58wvjzkj3#
您可以使用样式化组件或CSS模块。下面是如何在Navbar.jsx中使用CSS模块创建Navbar.module.css文件。
Navbar.module.css
.navbar{ display: flex; justify-content: center; } .logo{ display: inline-block; } //add your CSS classes
字符串在Navbar.jsx文件中导入CSS文件
Navbar.jsx
import classes from './Navbar.module.css'
型在`Navbar.jsx '中使用这些类
<nav className={classes.navbar}>...</nav>;
型class变量将包含CSS类作为属性。了解更多关于CSS Modules
3条答案
按热度按时间rn0zuynd1#
你可以使用CSS Modules或styled-components(如emotion)来将你的css范围扩展到React中的组件。我不认为你会需要,如果你使用顺风,因为它服务的实用程序类。
1wnzp6jl2#
您需要使用CSS模块。创建
your-component.module.scss
或css
文件并导入,如字符串
既然你来自Vue,CSS-in-JS可能更适合你。你有很多选项,如StyledComponents、Linaria、Emotion等。
58wvjzkj3#
您可以使用样式化组件或CSS模块。下面是如何在Navbar.jsx中使用CSS模块
创建
Navbar.module.css
文件。字符串
在
Navbar.jsx
文件中导入CSS文件型
在`Navbar.jsx '中使用这些类
型
class变量将包含CSS类作为属性。
了解更多关于CSS Modules