标签: css-modules

在CSS-装载机README建议localIdentName设置为

'[path][name]__[local]--[hash:base64:5]'

是否需要哈希后缀？它仍然是独一无二的吗？

'[path][name]__[local]'

为什么或者为什么不？

在这个GitHub问题讨论中#3是一个选项的事实让我相信它可能没有必要.

我正在一个新的React项目中使用CSS模块(通过Webpack css loader),尽管它工作得很好,但我无法让ReSS Select的SCSS 工作.我想这是因为它试图创建local一个JS in react-select不知道的classNames .有没有办法导入整个.scss文件,但是全局范围而不是本地范围？

在一些SCSS文件中,我看到以下内容:

:global {
  /* ... */
}

我不知道它是SCSS功能还是CSS功能.我试着搜索它但是第一眼看不到任何好的结果.

我正在使用一个(现在较旧的)版本的react-boilerplate,它带有CSS模块.它们的优点在于您可以创建变量并将其导入其他CSS文件中.

这是我的colors.css文件

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

当我导入该文件时,我只需要在我的.css文件的顶部使用:

@import 'components/App/colors.css';

我希望我的网站有两个主题的选项,我希望能够使用Javascript动态更新这些变量.最好的方法是什么？

编辑:我希望有一种方法来更新colors.css文件,而不必在从两个可能的css文件中提取的所有组件中进行条件导入...让我知道是否有办法做到这一点,如果有,我会改变接受的答案.谢谢所有回答的人!

关于css-modules的文档很稀疏,所以我不确定我是否可以这样做.

这篇文章说的是我用按钮设置样式的方式normal,error状态看起来像这样:

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

但我更喜欢这样写:

.common {
    /* font-sizes, padding, border-radius */
    &.normal { /* blue color, light blue background */ }
    &.error { /* red color, light red background */ }
}

就像我一直做的那样,没有引入这种新composes语法.我认为如果我可以在代码中嵌套它们,哪些样式构建在其他样式之上更清楚.

但我不知道这将由css-modules导出什么？他们提供的唯一例子是简单的类名选择器.我不知道.common.normal将被导出为什么,或者什么.common > .normal …

我有一个ReactCSSTransitionGroup我正在使用CSS模块(和react-router的动态路由,但我相信这是按预期工作).

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

在appear与leave过渡完美地工作-但enter过渡不-他们只是立即出现,与以前的组件淡出新的组件已进入后.

CSS(使用CSS模块):

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

---编辑---

我发现它在儿童路线上按预期工作(我的应用程序中只有少数几个).包括子路由在内的所有路由都是动态加载的,所以我仍然不确定是什么原因导致它在这些情况下起作用而在其他情况下不起作用.

我正在使用带有 SASS 和 CSS 模块的 React。如何在不传递新 ClassName 或类似内容的情况下设置子组件的样式。对于前。

我想在子组件上定位或做一些样式，而不必给出特定的类，就像你做的时候p span一样，所有的跨度都是子组件，我只想做一些引用所有子组件的样式父组件中的组件。但是随着类的编译，我不知道如何引用那些孩子。

//ParentComponent.js
Import Styles from 'ParentComponent.scss';
Import Child from 'ChildComponent';
Import ChildB from 'ChildComponentB';
...
return(
    <div>
        <ChildB />
        <Child />
        <Child />
    </div>
);


//ParentComponent.scss (?)(?)
.child {...}

例如，这里如何Child仅引用组件而不传递 ClassName，或者不导入 ChildComponent 的 SASS 文件以获取对组件类的引用。

//ChildComponent.js
Import Styles from 'ChildComponent.scss';
...
return(
    <div classNames={Styles.child}></div>
);

//ChildComponent.scss
.child {...}

我有一个包含以下文件的 React 组件：

• src/components/HomePage/index.js
• src/components/HomePage/style.scss

该组件非常简单：

import React from 'react';
import './style.scss';

const HomePage = () => {
    return (
        <div className="homepage">
            <h1>Landing page</h1>
        </div>
    );
};

export default HomePage;

在其中，style.scss我将样式应用于所有<h1>标签：

h1 {
    color: #f3f3f3;
    font-family: "Cambria";
    font-weight: normal;
    font-size: 2rem;
}

它按预期工作。但是，我现在看到其中的 h1 样式styles.scss已应用于我网站上的每个 h1，甚至在不使用此组件的页面上也是如此。

我正在使用 Gatsby，但它本质上是一个 React 应用程序。我的理解是，React 的代码分割功能会解决这个问题，代码style.scss只会包含在使用我的组件的任何页面的捆绑包中。

这就是我要问的原因。我有两个简单的修复方法：

• 把所有东西都包在包装纸style.scss里.homepage
• 使用 CSS 模块并将文件重命名为style.module.scss. 当我看到人们这样做时，他们总是“从 './style.module.scss'导入样式” - 有没有一种方法可以拥有 CSS 模块而不将其分配给这样的对象？

更新：在花了很多时间使用 React …

我正在为我的项目使用css模块,我有一个文件positioning.css,它有一些我想导入的有用类.例如.right, .left

使用CSS模块的最佳方法是什么？

目前我可以看到两个选项,但它们并不是那么好:

组件风格的组成

.right {
    composes: right from '../styles/positioning.css';
}

要么

组件中的多个css模块导入

import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)

class Menu extends Component {

  render() {

    return (
      <div styleName='menu'>
        <div styleName='left'>this is left</div>
        <div styleName='right'>this is right</div>
      </div>
    );
  }
};

export default CSSModules(Menu, styles);

我正在使用CSS代码来使用CSS Grid和CSS Modules进行项目.但是,当我尝试这样的事情

.loginRegisterDiv {
  composes: loginDiv;
  margin: 0px;
  width: 100%;
}

我收到一个错误,说组成了"未知属性".另外我使用的是css网格,在VS代码中似乎没有任何intellisense.我需要安装扩展程序吗？

我正在使用rallycoding规则集.