diff --git a/README.md b/README.md index 6cfa2a9..0ee0fa3 100755 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ You can load styles in the way that you prefer but is important to keep in mind For example, this is a valid one `.⚛App`. So, pay attention that components' names and css selectors always match. This is particular important if you have css-modules that modifies the original names, or code obfuscation. + The first ones for example need a syntax like this: ```css @@ -76,6 +77,28 @@ The first ones for example need a syntax like this: } ``` +And the second one, considering for example a minification process with webpack's UglifyJsPlugin (see [here](https://github.com/facebook/react/issues/4915) for more information), +need a component with a displayName attribute like this: + +```js +class ComponentName extends React.Component { + + static propTypes = { + // propTypes... + } + + // this + static displayName = 'ComponentName'; + + render() { + // render here... + } +} + +// or this +// ComponentName.displayName = 'ComponentName'; +``` + ### Adapting based on props @@ -84,6 +107,9 @@ If you want to set styles based on props, you can do it in 2 ways: - Set inline styles, as we can see in this example: ```js class Button extends React.Component { + + static displayName = 'Button'; + render() { return (