标签: react-css-modules

我目前正在使用带有React的CSS模块进行造型.所以我的每个组件都导入了它的组件特定的css文件,如下所示:

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

这样在设计单个组件时工作正常,但是如何应用非特定于组件的全局样式(html,正文,标题标记,div等)？

我正在使用webpack，react- datepicker并设法使用提供的 css 模块导入其 css。

import 'react-datepicker/dist/react-datepicker-cssmodules.css

该组件看起来很好很花哨，但现在我想让它像上面的时间元素一样全宽。

查看 CSS，它需要的是react-datepicker-wrapper由库动态添加的元素具有display: block. 我react-datepicker-wrapper在自己的 css 中所做的任何修改都不起作用。

我该怎么办？

日期选择器.component.jsx

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import './date-picker.component.bootstrap.css';

// eslint-disable-next-line no-confusing-arrow
const buildClassNames = (touched, isInvalid) =>
touched && isInvalid ? 'form-control is-invalid' : 'form-control';

export const DatePickerBootstrap = (props) => {
  const { setFieldValue, setFieldTouched, errors, touched } = props;
  const { name, value, label, ...rest } = props; …

在带有CSS模块的React/Webpack应用程序中,我.card在其自己的.scss文件中有一个模块,另一个模块名为.stat,它是要在其中显示的内容.card.

我需要实现以下内容,但以"css-modules"方式:

.card:hover .stat {
    color: #000;
}

如果我.card在.stat模块内部@import ,所有的.cardcss都被转储到.stat输出中,但我只希望能够使用正确的类名.card.

解决问题的正确方法是什么？

我想在一个用Typescript编写的React应用程序中使用带有webpack的'modules'选项的css-loader.这个例子是我的出发点(他们使用的是Babel,webpack和React).

webpack配置

var webpack=require('webpack');
var path=require('path');
var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={
    entry: ['./src/main.tsx'],
    output: {
        path: path.resolve(__dirname, "target"),
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    debug: true,
    devtool: 'eval-source-map',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['', '.jsx', '.ts', '.js', '.tsx', '.css', '.less']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            },
            {
                test: /\.tsx$/,
                loader: 'react-hot!ts-loader'
            }, {
                test: /\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: "react-hot!babel-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader"
            }, {
                test: …

我在左侧使用这个简单的React元素作为右侧页面上的根元素.

如何修复显示的错误？

我设法使用npm 中的这个插件在我的 Typescript React 类中导入 css 模块。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "exclude": [
    "node_modules/"
  ],
  "include": [
    "src/*"
  ]
}

我还在 src/ 文件夹中添加了以下模块文件：

模块.d.ts

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": …

我正在使用一个(现在较旧的)版本的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文件中提取的所有组件中进行条件导入...让我知道是否有办法做到这一点,如果有,我会改变接受的答案.谢谢所有回答的人!

我一直在寻找如何结合以下内容:ReactJS + ReactStrap和CSS-Modules(react-css-modules和/或boostrap-css-modules),但是,我似乎无法将这三个模块拼凑在一起来实现期望的效果(或在线找到任何帮助).

这背后的想法是让ReactStrap元素可用,即:

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

但也允许我使用CSS模块,最终结果类似于:

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

class Test extends React.Component {
    render () {
        return <Button color='danger' styleName='myButton'>Danger</div>;
    }
}

export default CSSModules(Table, styles);

mybutton.css可能是这样的:

.myButton {
  composes: btnPrimary from "bootstrap-css-modules/css/buttons.css";
  background-color: dodgerblue;
  border-color: dodgerblue;
}

我也在使用Webpack,所以我甚至不知道从哪里开始使用Webpack.

编辑:

我使用它的方式如下:

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group …

编辑:Meteor 1.3发布已经发布,即将发布npm包,允许直接使用没有Webpack的CSS模块

我想用https://github.com/gajus/react-css-modules通过NPM流星1.3.但自述文件说要使用Webpack.我从来没有使用Webpack,因为在我看来我和Meteor做同样的构建工作.

那么在这种特定的情况下,您是否知道在Meteor 1.3 beta中使用React Module CSS的方法？

翻译：博士

如何让 React 组件的 CSS 在影子根中工作，同时保持 CSS Modules 类的封装优势？我想插入每个组件的<style>元素而不是内部<head>或另一个任意元素。

我拥有的

我目前正在 React 中使用带有自定义 Webpack 脚本的 CSS 模块；[style-loader, css-loader, sass-loader]以传统方式。生成的编译后的 CSS 作为<style>标签注入head.

    // MyComponent.jsx
    import React from 'react';
    import styles from './MyComponent.scss';

    export const MyComponent = () => {
      return <div className={styles.container}>Hello!</div>
    }

    // MyComponent.scss
    .container {
      background: purple;
    }

结果

    <!-- rendered page -->
    <head>
      ...
      <style>.myComponent__container__hash123 { background: purple }</style>
    </head>
    <body>
      ...
      <div class="myComponent__container__hash123">Hello!</div>
    </body>

我想要的是

为了在影子根内部使用，我想将每个组件的编译 CSS …