标签: react-css-modules

我正在尝试将React CSS Modules添加到我的项目中，但是我遇到了eslint的问题。我的登录视图如下所示：

import React, { PropTypes as T } from 'react';
import {ButtonToolbar, Button} from 'react-bootstrap';
import Messages from '../Messages/Messages';
import AuthService from '../../utils/AuthService';
import CSSModules from 'react-css-modules';
import styles from './styles.module.css';

class Login extends React.Component {

    render() {

        let rootStyle = {
            textAlign: 'center'
        };

        let toolbarStyle = {
            display: 'inline-block'
        };

        const { auth } = this.props;

        return (
            <div styleName="root">
                <h2>Login</h2>
                <Messages auth={this.props.auth}></Messages>
                <ButtonToolbar styleName="toolbar">
                    <Button bsStyle="primary" onClick={auth.login.bind(this)}>Login</Button>
                </ButtonToolbar>
            </div>
        );
    }
}

Login.PropTypes = { …

在使用import语句时,我很难区分sass-loader和css-loader.根据我的知识,css loader解析导入语句(@import),而style-loader适用于在页面上动态注入样式.我也在我的应用程序中使用sass-loader.所以我对sass-loader功能感到困惑.它是否也解析了import语句以及将sass转换为css.在这种情况下,如果我在项目中只使用sass文件,那么我不需要css-loader,因为该工作将由sass-loader完成.我在这儿吗？有谁可以请高亮一点.任何帮助将非常感激

我有一个react组件,它有一个X选项,可以导入要使用CSS模块的样式表.

理想情况下,我希望通过使用eg获取一个全局环境变量

process.env.THEME

我不能用:

import MyStyleSheet from `${process.env.THEME}/my.module.css`

我可以用:

const MyStyleSheet = require(process.env.THEME/my.module.css);

然而.....

import/no-dynamic-requireeslint规则开始说它的坏. https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md

我读过的所有文章和帖子都说不可能.当然这是一个普通的想法,但我不能为我的生活找到如何做到这一点.有任何想法吗？

更新:

import React from 'react';

const Classes = import('./${process.env.theme}/Button.module.css');

const Button = () => (
  <button className={Classes.button}>My Themed Button</button>
);

export default Button;

我正在尝试开始使用react-css-modulesw/ babel-plugin-react-css-modules。目前我有一个运行 react的电子锻造应用程序。

我的.compilerc看起来如下：

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "2.0.0" } }],
          "es2015", "stage-0", "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-runtime"],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "2.0.0" } }],
          "es2015", "stage-0", "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-runtime"],
        "sourceMaps": "none"
      }
    }
  }
}

我的理解.compilerc类似于.babelrc（我没有.babelrc文件），请参阅：electron-compile（electron-forge 使用的 - 我猜）

但是，.css …

我的应用程序和组件的名称间距遵循以下约定：

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

#app-name {

  .list {
    margin: 0;
  }

}

我想使用 CSS 模块，但是，我不确定如何对其进行转换并保持应用程序和组件名称间距的相同特异性。我知道我可以简单地省略整个#app-nameID，但我想要这种特殊性。

想法？

现在我正在将我当前的项目移动Webpack 1到,Webpack 2并且我遇到了一些以前工作正常的css模块的问题.特别是,我使用css-loader和react-css-modules.我目前的开发配置如下:

test: /module\.css$/,
use: [
        'style-loader',
        {
           loader: 'css-loader',
           options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
           }
        },
        'postcss-loader'
   ]

它工作正常.对于生产我使用ExtractTextPlugin(版本2.0.0-beta.4)和我的Webpack配置为这种情况是这样的:

test: /module\.css$/,
loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
                    {
                       loader: 'css-loader',
                       options: {
                           modules: true,
                           importLoaders: 1,
                           localIdentName: '[hash:base64:5]'
                       }
                     },
                     'postcss-loader'
                    ]
                }),

在这种情况下,构建失败并出现以下错误:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

所以看起来它没有预先添加本地前缀.它也在css-loader文档中提到:

注意:对于使用extract-text-webpack-plugin进行预渲染,您应该在预渲染包中使用css-loader/locals而不是style-loader!css-loader.它不嵌入CSS,只导出标识符映射.

所以我尝试了加载器:'css-loader/locals'以及将它添加到选项中,但不幸的是,没有任何作用.

我也试图用postcss …

我有一个通过插件使用 CSS 模块的组件babel-plugin-react-css-modules。

在组件生命周期的某些时刻，我希望能够通过直接访问 DOM 来计算它的新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并稍后删除它不会影响组件或其状态，因此我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件的相关联。state。

如果我这样做，则会将this.DOMReference.classList.add('full-width');类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了，它将被应用styleName="full-width"（例如Component__full-width___Pjd10）

.full-width有没有办法在不进行全局声明的情况下做到这一点？

我可以用 来做到这一点吗react-css-modules？

我有以下蚂蚁设计搜索输入组件：

 <Search
  size="large"
  placeholder="Search..."
  className="dashboardSearch"
  />

我正在尝试修改边框半径以使其具有圆形形状，但是我在 css 文件中尝试的所有内容都不起作用。

css文件：

.dashboardSearch {
    width: 300px;
    border-radius: 25px;

}

.ant-input-search {
    width: 300px;
    border-radius: 25px;
}

无论如何要修改搜索输入组件的边框半径？通常当我直接修改 ant 设计类名称时，它会起作用。但在这种情况下它没有。还有另一种我失踪的方式吗？

我有2个相同的组件，它们的样式略有不同，因此我想重用常见的样式，但又不想为它们使用全局CSS，如何实现呢？

import React from 'react';
import commonStylesfrom '../common/table.css';
import styles from '../uniquesStyles.css';

export default class Table extends React.Component {
   render () {
      return <div styleName='table'>
           <div styleName='something-diffrent'>
               <div styleName='cell'>A0</div>
               <div styleName='cell'>B0</div>
           </div>
      </div>;
   }
} 

//how can I combine 2 files here
export default CssMudule(Table, {styles, commonStyles})

我正在使用本地范围限定我的 css 文件

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

在 webpack.config.dev 和 prod.js 中。我可以使用我为组件定义的样式，使用来自“./Component.css”的导入样式。现在我正在尝试使用 react-select 第三方组件。现在该组件具有我想要使用的预定义样式。要使用它，我按如下方式导入样式

导入'反应选择/dist/react-select.css'

但是样式没有被应用。如何为导入的组件启用预定义的样式。