标签: react-css-modules

覆盖css类/自定义react-bootstrap组件的最佳方法是什么？ - (我已经阅读过文档,除非我遗漏了一些内容,否则不予考虑).

从我所看到的,它似乎是内联样式(镭)和CSS模块之间的选择,但哪个更好,为什么？

我正在使用 React Css 模块来设计我的 React 应用程序。

我有一些带有 id 属性的 html 元素，我想使用 css id 选择器而不是类选择器来设置它们的样式。React css 模块可以做到这一点吗？例如。

这是一个 css 示例，我将其称为 Button.modules.css

#specialButon {
 margin: 5px;
}

.notSpecialButton {
 margin: 5px;
}

这是反应组件的一个例子

import style from './Button.module.css';

function Button() {

 render(
  <div>
   <button id="specialButon">Special<button>
   <button className={style.notSpecialButton}>Not Special<button>
  </div>
)

export default Button

你能告诉我，如何使用 de id 选择器来应用样式元素？

感谢您。

问题

我正在尝试在我的 React 项目中使用babel-plugin-react-css-modules来获得比React CSS Modules更好的性能。

但是，这些样式没有正确应用。

原因

标签中的版本<style>用奇怪的连字符包裹，例如：

• 在标签中<style>：-components-Foo-___Foo__foo___1fcIZ-
• 关于 DOM 元素类名：components-Foo-___Foo__foo___1fcIZ

即使我们使用相同的localIdentName，生成的结果也与 DOM 元素上的 css 和 className 中的选择器不同。

（注意：在 babel-plugin-react-css-modules 中，是localIdentName硬 [path]___[name]__[local]___[hash:base64:5]编码的 options.generateScopedName）

知道为什么会有连字符包装器吗？

我正在尝试在我的项目中使用 Storybook v5.0，并且我正在使用 React + Webpack4 + CSS 模块。（我没有使用 CreateReactApp）

我的设置非常简单，并且我能够在没有 CSS 模块的情况下很好地设置 Storybook。

但是，如果我尝试编辑自定义故事书 webpack 配置以支持 CSS 模块，则会出错。

当我运行时，npm run storybook我得到的错误是：

ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

在我的package.json：

"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",

我.storybook/webpack.config.js遵循他们网站上的示例，如下所示：

const path = require("path");

const stylesLoaders = …

我在尝试使用 RollupJS 创建组件库时遇到了一些问题。

我正在构建一个要在其他项目中使用的反应组件库。该库使用 css-modules 来设置组件的样式。我目前有一个基本版本的组件库，但是当我在 Gatsby 项目中使用它时，我得到了一个 FOUC（因为 js 被 javascript 注入到头部）。这导致 mo 提取 CSS 并将其注入到消费应用程序的头部，但我不认为这是要走的路。

我想要完成的是每个组件都公开自己的样式表，因此消费应用程序只能导入它需要的组件的样式。（更好的方法是我们只需要导入我们需要的组件，它就会为应用程序提供 CSS，但那是第 2 阶段）

我的项目结构是这样的

- src
  - components
    - component_1
        * index.js
        * styles.module.scss
    - component_2
        * index.js
        * styles.module.scss

为了能够分别引用每个组件的样式，我（认为）我需要一个输出结构，如

- dist
  - modules
    - components
      - component_1
        * … (files generated by rollup)
        * styles.css
      - component_2
        * … (files generated by rollup)
        * styles.css

我一直在摆弄我的汇总设置并到了这一点：下面的配置给了我一个大的索引 CSS 文件，但是根据库的增长方式，我认为始终必须包含所有内容并不是一个好习惯组件样式（即使是未使用的组件样式）

import babel from "rollup-plugin-babel";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss"; …

有谁知道任何有助于突出显示未在 css-modules 中使用的类的工具？
最近我在我的项目中添加了 typescript-plugin-css-modules，它帮助我检测我是否在 JSX 中使用了不存在的类名，但现在我也希望能够检测到 module.css 中未使用的类，因为它不必要地添加了死css 代码到包中。

我正在尝试测试使用React CSS模块的组件的生成类

这是一个示例Foo组件:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Foo.css';

const Foo = ({ className })  => <div styleName={className} />;

Foo.propTypes = {
  className: React.PropTypes.string.isRequired,
};

export default CSSModules(Foo, styles, { allowMultiple: true, errorWhenNotFound: false });

测试代码(Foo.spec.jsx):

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Foo from '../../../app/components/Foo';

describe('<Foo/>', () => {
    it.only('should return a className prop as class value', …

我有一个_color.scss文件，其中包含400种颜色作为变量。我喜欢20个需要在其样式中使用此颜色变量的组件。

我正在使用SCSS + CSS模块构造样式。到目前为止，我正在将其导入_color.scss每个组件的中style.scss。

例：

component1.scss

@import "color.scss";

component2.scss

@import "color.scss";

component3.scss

@import "color.scss";

以前，当我独立使用SCSS时，我会将导入color.scss到我的系统中，index.scss然后导入它下面的所有其他样式。这样，变量将在所有组件中可用。

例：

//index.scss
@import "color.scss";
@import "component1.scss";
@import "component2.scss";
@import "component3.scss";

现在，所有下的变量_color.scss将可用下component1.scss，component2.scss和component3.scss。

有没有办法做与此类似的事情CSS Modules + SCSS？一个声明全局变量的地方？

我在 React 应用程序的webpack.config中启用了CSS 模块，以便我可以在本地将 CSS 文件范围限定为单个组件。我也试图从使用TabView的组件PrimeReact。当我这样做时，不应用 PrimeReact 的主题。如果我创建一个单独的项目并且不启用 CSS 模块，则主题会正确应用。

如何使用 PrimeReact 主题并启用 CSS 模块？

我已经测试将位于 Tabs.js 中的内容直接移动到 App.js 中并获得相同的结果。

启用 CSS 模块

配置文件

require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash_base64:5]'
            },
          },

应用程序.js

import React, { Component } from 'react';
import classes from './App.css';
import Tabs from './UI/Tabs';

class App extends Component {
  render() {
    return (
        <Tabs/>
    );
  }
}

export default App;

标签页.js

import …

我在webpack中设置了一些别名,如下所示:

  resolve: {
    alias: {
      data: path.resolve(__dirname, 'data'),
      withStyles: 'isomorphic-style-loader/lib/withStyles',
      modules: path.resolve(__dirname, 'src', 'modules'),
      components: path.resolve(__dirname, 'src', 'components'),
    },

@imports在文件顶部的sass文件中执行时,它们工作正常:

@import '~components/common/css/mixins';

.root {
  @include scale-size(padding-top, 24px, 42px);

...

但是,当加载"compes"时,它说它找不到模块:

.bottom-cta {
  composes: cta from '~components/common/css/button';
...

但是,如果使用"普通"路径(../../components/common/css/button)它可以工作.

这是预期的行为吗？我怎么解决这个问题？

提前致谢.