添加带有样式的类没有任何作用 - NextJS答案

【问题标题】：Adding a class with styling does nothing - NextJS添加带有样式的类没有任何作用 - NextJS
【发布时间】：2021-06-19 14:24:42
【问题描述】：

我目前正在尝试学习 NextJS，我决定使用一个简单的天气 api 来收集来自给定城市的数据。我学到了一些新东西，到目前为止我真的很喜欢。然而，有一个问题我似乎无法解决，那就是添加一个带有样式的类。

现在...鉴于下面的 GIF，您可以看到它确实在键入位置时添加了类，但样式没有改变。 https://gyazo.com/55be0759cc8cc514905a7a661274f73c

当我添加类时，'Home_main__1Z1aG' 应该改变它的高度和字体大小，但它没有。我以前从未遇到过这种情况，并且我确保我的目标是正确的 div。

我使用 state 将类添加到 'Home_main__1Z1aG' div。

<main className={`${styles.main} ${searchedCity ? 'loc_set' : ''}`}>
     <input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>

我的造型：

.loc_set {
  height: 10vh;

  .title {
    font-size: 2.2rem;
  }
}

值得一提的是，我已将 SCSS 添加到我的项目中。

我认为我需要以某种方式渲染整个 div，因为它是在服务器端渲染的，但是我想错了吗？我基本上已经尝试移动我的样式以确保嵌套不是问题，我已经确保该类被正确命名等等。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

Next.js 中的组件使用 CSS 模块。假设您提供的 HTML 在组件中而不是页面中，您必须使用导入来引用它。

<main className={`${styles.main} ${searchedCity ? styles.locSet : ''}`}>
     <input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>

我不确定_ 是否有效，所以也许将其更改为带连字符的类名。

.loc-set {
  height: 10vh;

  .title {
    font-size: 2.2rem;
  }
}

【讨论】：

嗨。 styles.loc_set 有效。我以为你可以像我一样做，但是 React/next 处理的东西与我习惯的（php）不同。谢谢。

【解决方案2】：

你必须使用＆符号：

.loc_set {
  height: 10vh;

  & .title {
    font-size: 2.2rem;
  }
}

【讨论】：