Create-react-app: Use react CSS modules

[vincaslt]

I assumed create-react-app uses react-css-modules, but this code does not work (no styles applied):

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

const TextField = ({children}) => (
  <div className={styles.inputContainer}>
    <span className={styles.inputLabel}>{children}</span>
    <input className={styles.inputField}/>
  </div>
)

export default TextField

It does, however, work when classes are defined as strings rather than scoped to this component. I think it wouldn't hurt to have this available for projects using create-react-app, what do you think?

[mxstbr]

See the discussion in #90 (and the one in #78 too) please!

[cunde]

my-app uses react-css-modules in create-react-app no work

import React, {Component} from 'react';
import {immutableRenderDecorator} from 'react-immutable-render-mixin';
import CSSModules from 'react-css-modules';
import classnames from 'classnames';
import styles from '../css/style.scss';

// @immutableRenderDecorator
// @CSSModules(styles, {allowMultiple: true})
class lineBar extends Component {
    render() {
        const {left, width} = this.props;
        console.log(styles,'@styles');
        const classes = classnames({inkBar: true});

        return (
            <div styleName={classes}
                style={{
                    WebkitTransform: `translate3d(${left}px, 0, 0)`,
                    transform: `translate3d(${left}px, 0, 0)`,
                    width: width
                }}
            >
            </div>
        )
    }
}

export default immutableRenderDecorator(CSSModules(lineBar,styles, {allowMultiple: true}));

error message:

Uncaught Error: "lineBar" CSS module is undefined.
    at exports.default (generateAppendClassName.js:43)
    at linkElement (linkClass.js:67)
    at exports.default (linkClass.js:103)
    at WrappedComponent.render (extendReactClass.js:86)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

log styles

data:application/octet-stream;base64,Omdsb2JhbCB7CiAgaHRtbCwgYm9keSB7CiAgIC…lnaHQ6IDJweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDBDNDlGOwogIHotaW5kZXg6IDE7Cn0K @styles

[gaearon]

Create React App does not use or support CSS Modules. You can eject and add them if you'd like.

[JawsomeJason]

Great, recent article on using CSS Modules after ejecting Create React App: https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2

[LAMike310]

This article was a solution for getting CSS Modules, SASS, LESS and Stylus:

create-react-app my-app --scripts-version custom-react-scripts

[gaearon]

Note that custom-react-scripts is not officially supported. It is maintained by a community member.

[JustFly1984]

exactly. the same issue with auth0-react-scripts. Shared forks considered
harmful.

2017-07-05 7:25 GMT+08:00 Dan Abramov [e-mail]:

Note that custom-react-scripts is not officially supported. It is
maintained by a community member.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/204#issuecomment-312966225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACJsefVoSMRweRUfQCVvLLKeYBJpW3caks5sKsnUgaJpZM4JU4mJ
.

[gaearon]

I wouldn't say anything is "considered harmful", we actually appreciate the community publishing forks. I just want to make sure that people reading this thread in the future will have right expectations with regards to level of support we can provide.

[spehlivan]

Hi gaearon, i'm wondering why css modules does not support in create-react-app. I think each component has own style.

[gaearon]

We might support it as opt-in in the future. We don't support it by default because it's not a standard syntax, some tools don't understand it, and it's very confusing to beginners who aren't used to importing specific classnames.

[dennisat]

Maybe add it as a option.

[gaearon]

CSS modules are now supported.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html