Code Monkey home page Code Monkey logo

react-with-styles's Introduction

Maintenance Mode: This project is currently in maintenance mode and will eventually be archived. More info


react-with-styles Version Badge

License Downloads

npm badge

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.

Interfaces

Other resources

How to use

Step 1. Define your theme

Create a module that exports an object with shared theme information like colors.

export default {
  color: {
    primary: '#FF5A5F',
    secondary: '#00A699',
  },
};

Step 2. Choose an interface

You will need to choose the react-with-styles interface that corresponds to the underlying CSS-in-JS framework that you use in your app. Look through the list of existing interfaces, or write your own!

If you choose to write your own, the interface must implement the following functions:

Function Description
create Function that outputs the styles object injected through props.
(Optional, but required if createLTR is not provided).
createLTR LTR version of create.
(Required, unless a create function is provided)
createRTL RTL version of create.
(Required, unless a create function is provided)
resolve This is the css function that is injected through props. It outputs the attributes used to style an HTML element.
(Optional, but required if no resolveLTR is provided)
resolveLTR LTR version of resolve.
(Required, unless the resolve function is provided)
resolveRTL RTL version of resolve.
(Required, unless the resolve function is provided)
flush? Flush buffered styles before rendering. This can mean anything you need to happen before rendering.
(Optional)

Step 3. Register the chosen theme and interface

Option 1: Using React Context (recommended)

☝️ Requires React 16.6+

As of version 4.0.0, registering the theme and interface can be accomplished through React context, and is the recommended way of registering the theme, interface, and direction.

For example, if your theme is exported by MyTheme.js, and you want to use Aphrodite through the react-with-styles-interface-aphrodite interface, wrap your application with the WithStylesContext.Provider to provide withStyles with that interface and theme:

import React from 'react';
import WithStylesContext from 'react-with-styles/lib/WithStylesContext';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import MyTheme from './MyTheme';

export default function Bootstrap({ direction }) {
  return (
    <WithStylesContext.Provider
      value={{
        stylesInterface: AphroditeInterface,
        stylesTheme: MyTheme,
        direction,
      }}
    >
      <App />
    </WithStylesContext.Provider>
  );
}

To support people using a right-to-left (RTL) context, we recommend using react-with-styles along with react-with-direction. You can provide the direction directly if you have a utility that determines it like in the example above, or you can use the provided utility, WithStylesDirectionAdapter, to grab the direction that's already been set on the react-with-direction context and amend WithStylesContext with it.

import React from 'react';
import WithStylesContext from 'react-with-styles/lib/WithStylesContext';
import WithStylesDirectionAdapter from 'react-with-styles/lib/providers/WithStylesDirectionAdapter';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import MyTheme from './MyTheme';

export default function Bootstrap() {
  return (
    <WithStylesContext.Provider
      value={{
        stylesInterface: AphroditeInterface,
        stylesTheme: MyTheme,
      }}
    >
      <WithStylesDirectionAdapter>
        <App />
      </WithStylesDirectionAdapter>
    </WithStylesContext.Provider>
  );
}

Or simply wrap the Bootstrap function above in withDirection yourself.

☝️ Note on performance: Changing the theme many times will cause components to recalculate their styles. Avoid recalculating styles by providing one theme at the highest possible level of your app.

Option 2: Using the ThemedStyleSheet (legacy)

The legacy singleton-based API (using ThemedStyleSheet) is still supported, so you can still use it to register the theme and interface. You do not have to do this if you use the WithStylesContext.Provider. Keep in mind that this API will be deprecated in the next major version of react-with-styles. You can set this up in your own withStyles.js file, like so:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import { withStyles } from 'react-with-styles';

import MyTheme from './MyTheme';

ThemedStyleSheet.registerTheme(MyTheme);
ThemedStyleSheet.registerInterface(AphroditeInterface);

export { withStyles, ThemedStyleSheet };

It is convenient to pass through withStyles from react-with-styles here so that everywhere you use them you can be assured that the theme and interface have been registered. You could likely also set this up as an initializer that is added to the top of your bundles and then use react-with-styles directly in your components.

✋ Because the ThemedStyleSheet implementation stores the theme and interface in variables outside of the React tree, we do not recommended it. This approach does not parallelize, especially if your build systems or apps require rendering with multiple themes.

Step 4. Styling your components

In your components, use withStyles() to define styles. This HOC will inject the right props to consume them through the CSS-in-JS implementation you chose.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, withStylesPropTypes } from './withStyles';

const propTypes = {
  ...withStylesPropTypes,
};

function MyComponent({ styles, css }) {
  return (
    <div>
      <a
        href="/somewhere"
        {...css(styles.firstLink)}
      >
        A link to somewhere
      </a>

      {' '}
      and
      {' '}

      <a
        href="/somewhere-else"
        {...css(styles.secondLink)}
      >
        a link to somewhere else
      </a>
    </div>
  );
}

MyComponent.propTypes = propTypes;

export default withStyles(({ color }) => ({
  firstLink: {
    color: color.primary,
  },

  secondLink: {
    color: color.secondary,
  },
}))(MyComponent);

You can also use the useStyles hook or a decorator.


Documentation

withStyles([ stylesThunk [, options ] ])

This is a higher-order function that returns a higher-order component used to wrap React components to add styles using the theme. We use this to make themed styles easier to work with.

stylesThunk will receive the theme as an argument, and it should return an object containing the styles for the component.

The wrapped component will receive the following props:

  1. styles - Object containing the processed styles for this component. It corresponds to evaluating stylesInterface.create(stylesThunk(theme)) (or their directional counterparts).
  2. css - Function to produce props to set the styles with on an element. It corresponds to stylesInterface.resolve (or their directional counterparts).
  3. theme - This is the theme object that was registered. You can use it during render as needed, say for inline styles.

Example usage

You can use withStyles() as an HOC:

import React from 'react';
import { withStyles } from './withStyles';

function MyComponent({ css, styles }) {
  return (
    <div {...css(styles.container)}>
      Try to be a rainbow in someone's cloud.
    </div>
  );
}

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}))(MyComponent);

As a decorator:

import React from 'react';
import { withStyles } from './withStyles';

@withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}))
export default function MyComponent({ styles, css }) {
  return (
    <div {...css(styles.container)}>
      Try to be a rainbow in someone's cloud.
    </div>
  );
}

You can also use the experimental hook:

import React from 'react';
import useStyles from 'react-with-styles/lib/hooks/useStyles';

function stylesFn({ color, unit }) {
  return ({
    container: {
      color: color.primary,
      marginBottom: 2 * unit,
    },
  });
}

export default function MyComponent() {
  const { css, styles } = useStyles({ stylesFn });
  return (
    <div {...css(styles.container)}>
      Try to be a rainbow in someone's cloud.
    </div>
  );
}

Options

pureComponent (default: false)

By default withStyles() will create a functional component. If you want to apply the rendering optimizations offered by React.memo, you can set the pureComponent option to true to create a pure functional component instead.

If using the withStyles utility that is found in lib/deprecated/withStyles, it will instead use a React.PureComponent rather than a React.Component. Note that this has a React version requirement of 15.3.0+.

stylesPropName (default: 'styles')

By default, withStyles() will pass down the styles to the wrapped component in the styles prop, but the name of this prop can be customized by setting the stylesPropName option. This is useful if you already have a prop called styles and aren't able to change it.

import React from 'react';
import { withStyles, withStylesPropTypes } from './withStyles';

function MyComponent({ withStylesStyles, css }) {
  return (
    <div {...css(withStylesStyles.container)}>
      Try to be a rainbow in someone's cloud.
    </div>
  );
}

MyComponent.propTypes = {
  ...withStylesPropTypes,
};

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { stylesPropName: 'withStylesStyles' })(MyComponent);
cssPropName (default 'css')

The css prop name can also be customized by setting the cssPropName option.

import React from 'react';
import { withStyles, withStylesPropTypes } from './withStyles';

function MyComponent({ withStylesCss, styles }) {
  return (
    <div {...withStylesCss(styles.container)}>
      Try to be a rainbow in someone's cloud.
    </div>
  );
}

MyComponent.propTypes = {
  ...withStylesPropTypes,
};

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { cssPropName: 'withStylesCss' })(MyComponent);
themePropName (default 'theme')

The theme prop name can also be customized by setting the themePropName option.

import React from 'react';
import { withStyles, withStylesPropTypes } from './withStyles';

function MyComponent({ css, styles, withStylesTheme }) {
  return (
    <div {...css(styles.container)}>
      <Background color={withStylesTheme.color.primary}>
        Try to be a rainbow in someone's cloud.
      </Background>
    </div>
  );
}

MyComponent.propTypes = {
  ...withStylesPropTypes,
};

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { themePropName: 'withStylesTheme' })(MyComponent);
flushBefore (default: false)

Some components depend on previous styles to be ready in the component tree when mounting (e.g. dimension calculations). Some interfaces add styles to the page asynchronously, which is an obstacle for this. So, we provide the option of flushing the buffered styles before the rendering cycle begins. It is up to the interface to define what this means.

css(...styles)

This function takes styles that were processed by withStyles(), plain objects, or arrays of these things. It returns an object with attributes that must be spread into a JSX element. We recommend not inspecting the results and spreading them directly onto the element. In other words className and style props must not be used on the same elements as css().

import React from 'react';
import { withStyles, withStylesPropTypes } from './withStyles';

const propTypes = {
  ...withStylesPropTypes,
};

function MyComponent({ css, styles, bold, padding, }) {
  return (
    <div {...css(styles.container, { padding })}>
      Try to be a rainbow in{' '}
      <a
        href="/somewhere"
        {...css(styles.link, bold && styles.link_bold)}
      >
        someone's cloud
      </a>
    </div>
  );
}

MyComponent.propTypes = propTypes;

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },

  link: {
    color: color.secondary,
  },

  link_bold: {
    fontWeight: 700,
  },
}))(MyComponent);

Accessing your wrapped component with a ref

React 16.3 introduced the ability to pass along refs with the React.forwardRef helper, allowing you to write code like this.

const MyComponent = React.forwardRef(
  function MyComponent({ css, styles }, forwardedRef) {
    return (
      <div {...css(styles.container)} ref={forwardedRef}>
        Hello, World
      </div>
    );
  }
);

Refs will not get passed through HOCs by default because ref is not a prop. If you add a ref to an HOC, the ref will refer to the outermost container component, which is usually not desired. withStyles is set up to pass along your ref to the wrapped component.

const MyComponentWithStyles = withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}))(MyComponent);

// the ref will be passed down to MyComponent, which is then attached to the div
const ref = React.createRef()
<MyComponentWithStyles ref={ref} />

ThemedStyleSheet (legacy)

Registers themes and interfaces.

⚠️ Deprecation Warning: ThemedStyleSheet is going to be deprecated in the next major version. Please migrate your applications to use WithStylesContext to provide the theme and interface to use along with withStyles or useStyles. In the meantime, you should be able to use both inside your app for a smooth migration. If this is not the case, please file an issue so we can help.

ThemedStyleSheet.registerTheme(theme) (legacy)

Registers the theme. theme is an object with properties that you want to be made available when styling your components.

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';

ThemedStyleSheet.registerTheme({
  color: {
    primary: '#FF5A5F',
    secondary: '#00A699',
  },
});

ThemedStyleSheet.registerInterface(interface) (legacy)

Instructs react-with-styles how to process your styles.

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';

ThemedStyleSheet.registerInterface(AphroditeInterface);

Other Examples

With React Router's Link

React Router's <Link/> and <IndexLink/> components accept activeClassName='...' and activeStyle={{...}} as props. As previously stated, css(...styles) must spread to JSX, so simply passing styles.thing or even css(styles.thing) directly will not work. In order to mimic activeClassName/activeStyles you can use React Router's withRouter() Higher Order Component to pass router as prop to your component and toggle styles based on router.isActive(pathOrLoc, indexOnly). This works because <Link /> passes down the generated className from css(..styles) down through to the final leaf.

import React from 'react';
import { withRouter, Link } from 'react-router';
import { css, withStyles } from '../withStyles';

function Nav({ router, styles }) {
  return (
    <div {...css(styles.container)}>
      <Link
        to="/"
        {...css(styles.link, router.isActive('/', true) && styles.link_bold)}
      >
        home
      </Link>
      <Link
        to="/somewhere"
        {...css(styles.link, router.isActive('/somewhere', true) && styles.link_bold)}
      >
        somewhere
      </Link>
    </div>
  );
}

export default withRouter(withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },

  link: {
    color: color.primary,
  },

  link_bold: {
    fontWeight: 700,
  }
}))(Nav));

In the wild

Organizations and projects using react-with-styles.

react-with-styles's People

Contributors

beabout avatar greenkeeper[bot] avatar indiesquidge avatar lencioni avatar ljharb avatar majapw avatar mikefowler avatar mmarkelov avatar noratarano avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-with-styles's Issues

An in-range update of react-dom is breaking the build 🚨

Version 15.5.0 of react-dom just got published.

Branch Build failing 🚨
Dependency react-dom
Current Version 15.4.2
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As react-dom is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Release Notes v15.5.0

15.5.0 (April 7, 2017)

React

  • Added a deprecation warning for React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)
  • Added a deprecation warning for React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)
  • Fixed an issue when using ReactDOM together with ReactDOMServer. (@wacii in #9005)
  • Fixed issue with Closure Compiler. (@anmonteiro in #8895)
  • Another fix for Closure Compiler. (@Shastel in #8882)
  • Added component stack info to invalid element type warning. (@n3tr in #8495)

React DOM

  • Fixed Chrome bug when backspacing in number inputs. (@nhunzaker in #7359)
  • Added react-dom/test-utils, which exports the React Test Utils. (@bvaughn)

React Test Renderer

  • Fixed bug where componentWillUnmount was not called for children. (@gre in #8512)
  • Added react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)

React Addons

  • Last release for addons; they will no longer be actively maintained.
  • Removed peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)
  • Updated to remove references to React.createClass and React.PropTypes (@acdlite in 12a96b9)
  • react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Exporting multiple objects while using withStyles

Is it necessary that the component to which withStyles has been applied be exported as default?
If not, how can I export multiple components after applying withStyles on each of them?
i.e. I'm trying to do something like -

class comp1 extends React.Component{....} 
withStyles(styles1)(comp1)
class comp2 extends React.Component{....}
    withStyles(styles2)(comp2)
    module.exports = {
         comp1 : comp1,
         comp2: comp2
    };

But ,it's not working..

An in-range update of babel-cli is breaking the build 🚨

Version 6.24.1 of babel-cli just got published.

Branch Build failing 🚨
Dependency babel-cli
Current Version 6.24.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Question about syntax

Hi, Yesterday I took your package to replace withStyles from material-ui for yours.
I have a question about construction
<div ...css(styles.classname1, styles.classname2)/>
As for me that syntax is slightly redundant and also with that I can't use "classname" package, as example:
{ classnames(css(styles.classname1)), {classnames(css(styles.classname2)): this.state.error } }, or simply add some static styles, as example:
<div className="error", {...css(styles.classname)}> or
<div className={classname({ classnames(css(styles.classname1)), {error: this.state.error})}.

It's only two cases that I've run into in a few days.
I've wrapped some methods and now it works as always, as example:
<div className={classnames(styles.firstLink, styles.secondLink, {error: true})}>
That's work with JSS and Aphrodite.

Methods that I wrap:

const cssWrapper = (...params) => css.apply(css, params).className;
const aphroditeInterfaceCustom = {
    ...aphroditeInterface,
    create (styleHash) {
        const styles = aphroditeInterface.create(styleHash);

        return each(styles, (value, key) => {
            styles[key] = cssWrapper(value);
        });
    }
};

So, maybe I don't know or missed something, please explain for me why you chose this approach.

Support server-side rendering

Hi,
I`m trying to write an application that have many theme. In admin panel user can chose theme and after this when come back to site theme is changed. So I have some question about your packages:

  1. Is this packages support server-side rendering?
  2. Have any bottleneck for write this app?
    Thanks

Updating themes / styles dynamically

I have a use case where I basically need the component's props to modify styles.
Something like this:

setStyles((theme, props) => ({
  section: {
    color: props.userPickedColor,
  },
})(Component);

Is this possible right now? My users set values in the database that I retrieve and use to style components, which is why I need some way to access those values in runtime.

Another option might be to dynamically create themes and change the themeProvider's value each time, but that doesn't sound very wise. Even so if there's no other option I'd go with that I guess.

Thanks for the help!

An in-range update of mocha is breaking the build 🚨

Version 3.3.0 of mocha just got published.

Branch Build failing 🚨
Dependency mocha
Current Version 3.2.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details - ❌ **continuous-integration/travis-ci/push** The Travis CI build could not complete due to an error [Details](https://travis-ci.org/airbnb/react-with-styles/builds/225190618)

Release Notes coverave

Thanks to all our contributors, maintainers, sponsors, and users! ❤️

As highlights:

  • We've got coverage now!
  • Testing is looking less flaky \o/.
  • No more nitpicking about "mocha.js" build on PRs.

🎉 Enhancements

  • #2659: Adds support for loading reporter from an absolute or relative path (@sul4bh)
  • #2769: Support --inspect-brk on command-line (@igwejk)

🐛 Fixes

  • #2662: Replace unicode chars w/ hex codes in HTML reporter (@rotemdan)

🔍 Coverage

🔩 Other

Commits

The new version differs by 89 commits0.

  • fb1687e :ship: Release v3.3.0
  • 1943e02 Add Changelog for v3.3.0
  • 861e968 Refactor literal play-icon hex code to a var
  • 1d3c5bc Fix typo in karma.conf.js
  • 9bd9389 Fix spec paths in test HTML files
  • 0a93024 Adds tests for loading reporters w/ relative/absolute paths (#2773)
  • 73929ad Comment special treatment of '+' in URL query parsing
  • e2c9514 Merge pull request #2769 from igwejk/support_inspect_break_in_opts
  • 038c636 Support --inspect-brk on command-line
  • b4ebabd Merge pull request #2727 from lamby/reproducible-build
  • 882347b Please make the build reproducible.
  • a2fc76c Merge pull request #2703 from seppevs/cover_utils_some_fn_with_tests
  • ed61cd0 cover .some() function in utils.js with tests
  • f42cbf4 Merge pull request #2701 from craigtaub/landingSpec
  • 6065242 use stubbed symbol

There are 89 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Issues with HMR

When using react-with-styles and hot-module-replacement, the styles object passed in by props is not updating without a full page refresh.

Pass through styles?

How do you recommend passing additional styling through to the underlying component?

For example, I have this Row component

const Row = ({children, styles}) => {
  return (
    <div {...css(styles.row)}>
      {children}
    </div>
  );
};

But I want to be able to change its style based on what other component I'm using it in, like so

<Row style={{backgroundColor: 'green'}}>...</Row>
<Row style={{color: 'blue'}}>...</Row>

I could just add the style prop and pass it through to the div, but that seems like it goes against the point of this library.

Can this new style somehow be passed through into the styles of the withStyles function so it generates a css class? Or do you have a different suggested best practice for doing this?

confusion about modules

Hi I would like to use react-with-styles for one of my project but I am confused on what it means by modules is it supposed to be a css file ? When I tried to do this in a CSS file my compiler shows me errors
airbnbreactstyles

An in-range update of eslint-plugin-react is breaking the build 🚨

Version 7.1.0 of eslint-plugin-react just got published.

Branch Build failing 🚨
Dependency eslint-plugin-react
Current Version 7.0.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes v7.1.0

Added

Fixed

  • Fix prefer-stateless-function ignorePureComponents option when using class expressions (#1122 @dreid)
  • Fix void-dom-elements-no-children crash (#1195 @oliviertassinari)
  • Fix require-default-props quoted defaultProps detection (#1201)
  • Fix jsx-sort-props bug with ignoreCase and callbacksLast options set to true (#1175 @jseminck)
  • Fix no-unused-proptype false positive (#1183 #1135 @jseminck)
  • Fix jsx-no-target-blank to not issue errors for non-external URLs (#1216 @gfx)
  • Fix prop-types quoted Flow types detection (#1132 @ethanjgoldberg)
  • Fix no-array-index-key crash with key without value (#1242 @jseminck)

Changed

Commits

The new version differs by 105 commits.

  • cdfa56f Update CHANGELOG and bump version
  • 8bdb6a4 Update dependencies
  • 5be0be3 Remove re-added require-extension rule documentation
  • e7836b5 Add ESLint 4.0.0 to peerDependencies
  • 7cc380a Fix indent errors
  • 32bcb48 Merge pull request #1177 from fatfisz/curly-spacing-for-children
  • d57c115 Update the docs
  • 6903f18 Add back the support for the previous config
  • 5515130 Add more mixed tests
  • 408e1b1 Add the "children" property of the config
  • 65135b8 Fix the behavior of the boolean "attributes"
  • 7b9d9ad Change "spaces" to "when"
  • c9e9ded Allow attributes to have their own config
  • 9a8f800 Add a test case for a fixed bug
  • 0f0ab21 Move the first option into the config object

There are 105 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

TypeError: _ThemedStyleSheet2.default.registerDefaultTheme is not a function

Hi! I'm having trouble making react-with-styles work. I'm using the code from the 'How to Use' section, but I'm receiving the error.

TypeError: _ThemedStyleSheet2.default.registerDefaultTheme is not a function

in withStyles.js. This file has the following code:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';

import { css, withStyles, ThemeProvider } from 'react-with-styles';

import MyDefaultTheme from './MyDefaultTheme';

ThemedStyleSheet.registerDefaultTheme(MyDefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

export { css, withStyles, ThemeProvider, ThemedStyleSheet };

What can be happening?

thank you!
Rodrigo

react-native lacking a version compatible with react 15.5 is breaking the build 🚨

Version 2.8.1 of enzyme just got published.

Branch Build failing 🚨
Dependency enzyme
Current Version 2.8.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As enzyme is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Commits

The new version differs by 33 commits .

  • 8ab9528 v2.8.1
  • 75d1390 Merge pull request #876 from kentcdodds/pr/support-15.5
  • 21f6e7a [Tests] create-react-class should be a static dev dependency.
  • 4464a17 [Tests] move helpers in to test/_helpers dir
  • 22f368f address final comments
  • cc78489 Update error message in react-compat
  • b48e551 Change condition in performBatchedUpdates to a version check
  • 2f957af REACT155 constant is now true for react 15.5 or above
  • f5f6001 Update ReactWrapperComponent to use prop-types package
  • 3ff9832 Update karma cofig to be compatible with [email protected]
  • ec7bbc5 Lint
  • 270ee7f Remove unnecessary tests
  • d6badda Fix import
  • edeb99c Remove dependency on create-react-class
  • b0e2fac Extract batchedUpdates to a function

There are 33 commits in total. See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-import is breaking the build 🚨

Version 2.4.0 of eslint-plugin-import just got published.

Branch Build failing 🚨
Dependency eslint-plugin-import
Current Version 2.3.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 10 commits.

  • 44ca158 update utils changelog
  • a3728d7 bump eslint-module-utils to v2.1.0
  • 3e29169 bump v2.4.0
  • ea9c92c Merge pull request #737 from kevin940726/master
  • 8f9b403 fix typos, enforce type of array of strings in allow option
  • 95315e0 update CHANGELOG.md
  • 28e1623 eslint-module-utils: filePath in parserOptions (#840)
  • 2f690b4 update CI to build on Node 6+7 (#846)
  • 7d41745 write doc, add two more tests
  • dedfb11 add allow glob for rule no-unassigned-import, fix #671

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Add optional argument to `withStyles` allowing arbitrary data to be passed to the plugin

I propose modifying withStyles to accept an optional data argument to be passed through to the plugin for the plugin's use. The data argument would be passed to the create method of the interface.

Implementing this as an arbitrary and optional data argument maintains backwards-compatibility and allows any plugin now or in the future to make use of the feature for its own purposes.

The use case on which I'm currently working benefits from allowing the user to pass an optional string to withStyles. The purpose of the string is to uniquely identify the component consuming the styles relative to other components also using withStyles.

An in-range update of react-addons-test-utils is breaking the build 🚨

Version 15.5.0 of react-addons-test-utils just got published.

Branch Build failing 🚨
Dependency react-addons-test-utils
Current Version 15.4.2
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As react-addons-test-utils is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Release Notes v15.5.0

15.5.0 (April 7, 2017)

React

  • Added a deprecation warning for React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)
  • Added a deprecation warning for React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)
  • Fixed an issue when using ReactDOM together with ReactDOMServer. (@wacii in #9005)
  • Fixed issue with Closure Compiler. (@anmonteiro in #8895)
  • Another fix for Closure Compiler. (@Shastel in #8882)
  • Added component stack info to invalid element type warning. (@n3tr in #8495)

React DOM

  • Fixed Chrome bug when backspacing in number inputs. (@nhunzaker in #7359)
  • Added react-dom/test-utils, which exports the React Test Utils. (@bvaughn)

React Test Renderer

  • Fixed bug where componentWillUnmount was not called for children. (@gre in #8512)
  • Added react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)

React Addons

  • Last release for addons; they will no longer be actively maintained.
  • Removed peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)
  • Updated to remove references to React.createClass and React.PropTypes (@acdlite in 12a96b9)
  • react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

`styles` prop validation

I, with many of us, use your ESLint config preset, which is great.
It happens there are rules I don't like and I override them.

I am not sure about react/forbid-prop-types rule and its setting, which is following:

'react/forbid-prop-types': ['error', { forbid: ['any', 'array', 'object'] }],

I find it very useful, but hate it when it comes to styles prop. This is no-go with default preset:

Label.propTypes = {
  styles: PropTypes.object.isRequired,
};

To validate (and satisfy ESLint) I have to use shape validation rule and write down rules for all styles passed by decorator function - repeated work here. Since styles is defined in very same file and there is very little that could go wrong, I don't feel like paying special attention to that prop.

How do you validate styles prop at AirBnb?

Thanks for answer!


Okay, to be honest I often abuse vague shape validator function, without specifying actual shape of styles prop.

Label.propTypes = {
  styles: PropTypes.shape().isRequired,
};

Questions about style approaches

Hello. Love airbnb in open source. You are cool guys =)

In production some of your pages uses css-in-js, some BEM + OOCSS + Bootstrap-like grid. (col-xx)
https://github.com/airbnb/css

You also have css-in-js styleguide
https://github.com/airbnb/javascript/tree/master/css-in-javascript

As I understand react-with-styles is something like adapter to different css-in-js implementations libraries.

  • How do you plan to mix these approaches? Are you moving whole project to css-in-js?
  • How about theming? You have wrote several words about it, but as I understand Airbnb don't use it widely because it no necessity for a project. Is there some examples of real-world usage?
  • How about components versioning + theming? I feel several hidden traps 😃

Now I writing a tool for a handly documenting and catalogue components with versioning support.

Screenshot =)

It already couple of month works well for us. Now It's under active developement/refactoring and in 1-2 two month will be officially released much more mature.

Do you interested in something like this or you are already use some existing or private tool?

I want to include react-in-js live edit possibility with theming support in it and now trying to figure out some questions and find like-minded people with good experience in large projects.

It would be a miracle if you answer here or even better to some detailed article about it appears at medium-like resource.

Decorator shields public methods of a class

After decorating a dropdown:

@withStyles(style)
export default class UiDropdown

I'm no longer able to reference it:

this.dropdownRef.show() results in TypeError: this.dropdownRef.show is not a function

Benefit of running inline through css?

In the readme, you have this example

<div {...css(styles.container, { padding })}>

What benefit is providing by running the plain object through the css function?

From looking at the code, it just passes these objects into the style prop. But why not do this directly? Wouldn't that be more performant?

An in-range update of sinon is breaking the build 🚨

Version 2.2.0 of sinon just got published.

Branch Build failing 🚨
Dependency sinon
Current Version 2.1.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As sinon is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details - ❌ **continuous-integration/travis-ci/push** The Travis CI build could not complete due to an error [Details](https://travis-ci.org/airbnb/react-with-styles/builds/227885548?utm_source=github_status&utm_medium=notification)

Commits

The new version differs by 40 commits0.

  • f7ff840 Update docs/changelog.md and set new release id in docs/_config.yml
  • 59a7a34 Add release documentation for v2.2.0
  • 37676e8 2.2.0
  • b35d217 Update Changelog.txt and AUTHORS for new release
  • 0127365 Merge pull request #1363 from greena13/master
  • 4fe0a73 Flatten structure of getWindowLocation()
  • 38e3ec4 Fix matchers.md in v1.17.6 and v1.17.7 releases. (#1379)
  • 3d4bc16 Merge pull request #1364 from blacksun1/add-custom-promise
  • 7ac4f60 Fixes for pull request comments
  • 25bfde0 Added docs for usingPromise
  • 0a3518f Added usingPromise method to sandbox.
  • 17edad7 Added usingPromise method to stub.
  • c5bc9ab Merge pull request #1359 from kevincennis/kce/fix-1066
  • c633202 Merge pull request #1320 from ashirley/master
  • 17c2639 Merge pull request #1366 from GProst/master

There are 40 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

An in-range update of babel-register is breaking the build 🚨

Version 6.24.1 of babel-register just got published.

Branch Build failing 🚨
Dependency babel-register
Current Version 6.24.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-register is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Disable wrapping `displayName` with `withStyles(…)`

We use enzyme in our tests and it lets you use selectors like wrapper.find("MyComponent") but because of how react-with-styles renames the displayName we have to use wrapper.find("withStyles(MyComponent").

The line causing this is here:

WithStyles.displayName = `withStyles(${wrappedComponentName})`;

Would you be open to merging something that would allow us to make this optional?

Cannot read property 'create' of undefined

I'm getting Cannot read property 'create' of undefined and don't know why. I followed the examples and still getting this.

// theme.js

export default {
  color: {
    primary: '#FF5A5F',
    secondary: '#00A699'
  }
}
// styles.js

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
import { css, withStyles } from 'react-with-styles'
import MyTheme from './theme'

ThemedStyleSheet.registerTheme(MyTheme)

export { css, withStyles, ThemedStyleSheet }
// index.js

import React from 'react'
import PropTypes from 'prop-types'
import { css, withStyles } from './styles'

function MyComponent({ styles }) {
  return (
    <div>
      <a href="/somewhere" {...css(styles.firstLink)}>
        A link to somewhere
      </a>{' '}
      and{' '}
      <a href="/somewhere-else" {...css(styles.secondLink)}>
        a link to somewhere else
      </a>
    </div>
  )
}

MyComponent.propTypes = {
  styles: PropTypes.object.isRequired
}

export default withStyles(({ color }) => ({
  firstLink: {
    color: color.primary
  },

  secondLink: {
    color: color.secondary
  }
}))(MyComponent)

If I export like this

export default withStyles()(MyComponent)

it works just fine, but I don't have the styles.

An in-range update of babel-preset-airbnb is breaking the build 🚨

Version 2.3.0 of babel-preset-airbnb just got published.

Branch Build failing 🚨
Dependency babel-preset-airbnb
Current Version 2.2.3
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-airbnb is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 6 commits.

  • 9410812 Version 2.3.0
  • 98c9c1d Merge pull request #13 from airbnb/babel-preset-env
  • a3b73f6 Switches to use babel-preset-env
  • 13da4ee [Tests] npm v4.6+ doesn’t work on node < v1
  • 3065a5c [Deps] update babel-plugin-syntax-trailing-function-commas, babel-plugin-transform-es2015-template-literals, babel-plugin-transform-es3-member-expression-literals, babel-plugin-transform-es3-property-literals, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-jscript, babel-plugin-transform-object-rest-spread, babel-preset-es2015, babel-preset-react
  • bd811d3 [Dev Deps] update eslint, eslint-config-airbnb-base, eslint-plugin-import

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Run inline styles through prefixer in aphroditeInterface

Aphrodite uses inline-style-prefixer on the styles it produces. Since you already have the dependency if you are using the aphroditeInterface, we should run the inline styles through this. This will make it easier to work with.

Not working with React Native

Thanks for react-with-styles! It's working well with Aphrodite so far, but I can't get it to work in an existing or new React Native (0.33) project. The first problem I run into is having to install babel-preset-airbnb due to this error:

TransformError: /Users/lespozdena/Desktop/AwesomeProject/node_modules/react-with-styles-interface-react-native/lib/reactNativeInterface.js: Couldn't find preset "airbnb" relative to directory "/Users/lespozdena/Desktop/AwesomeProject/node_modules/react-with-styles-interface-react-native"

Clearing that dep lets the app run, but then react-with-styles does not ever deliver the styles prop (either via the default one or a custom-named one). The prop is always undefined. I never had this issue with React/Aphrodite.

Receive component props in decorator

Receive props passed to component in decorator function in order to create style definition.

Example:

function Avatar({ styles }) {
  return <Image style={styles.image} />
}

const AvatarWithStyle = withStyles(({ color }, ownProps) => ({
  image: {
    width: ownProps.imageSize,
    height: ownProps.imageSize,
    borderRadius: ownProps.imageSize / 2,
  },
}))(Avatar);

Will pay more attention later in order to discover whether it's possible with existing implementation.

An in-range update of eslint-plugin-react is breaking the build 🚨

Version 7.5.0 of eslint-plugin-react was just published.

Branch Build failing 🚨
Dependency eslint-plugin-react
Current Version 7.4.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes v7.5.0

Added

Fixed

Changed

Commits

The new version differs by 176 commits.

  • c148893 Update CHANGELOG and bump version
  • f746d68 Update dependencies
  • 771f534 Merge pull request #1539 from jseminck/jsx-indent-bug
  • acc4f24 Use the new function also in jsx-indent-props
  • c51087c Extract isNodeFirstInLine to astUtil function
  • 6d50fb6 Fix test by using the same isNodeFirstInLine function found in jsx-closing-tag-location rule
  • 8f3dc55 Add failing test
  • 27b8279 Merge pull request #1532 from jomasti/issue-1524
  • 24190c6 Merge pull request #1398 from jseminck/components-as-class
  • cf2d6f6 Keep existing API of exporting Components
  • 04a42a9 Move private functions out of the class
  • a0d47cf Export an object with a single detect() function, removing the static class property
  • e3638ab Remove @class jsdoc
  • c379156 Move detect to a static class property
  • 8d66521 Re-write Components as a class

There are 176 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of react is breaking the build 🚨

Version 15.5.0 of react just got published.

Branch Build failing 🚨
Dependency react
Current Version 15.4.2
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details
Release Notes v15.5.0

15.5.0 (April 7, 2017)

React

  • Added a deprecation warning for React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)
  • Added a deprecation warning for React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)
  • Fixed an issue when using ReactDOM together with ReactDOMServer. (@wacii in #9005)
  • Fixed issue with Closure Compiler. (@anmonteiro in #8895)
  • Another fix for Closure Compiler. (@Shastel in #8882)
  • Added component stack info to invalid element type warning. (@n3tr in #8495)

React DOM

  • Fixed Chrome bug when backspacing in number inputs. (@nhunzaker in #7359)
  • Added react-dom/test-utils, which exports the React Test Utils. (@bvaughn)

React Test Renderer

  • Fixed bug where componentWillUnmount was not called for children. (@gre in #8512)
  • Added react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)

React Addons

  • Last release for addons; they will no longer be actively maintained.
  • Removed peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)
  • Updated to remove references to React.createClass and React.PropTypes (@acdlite in 12a96b9)
  • react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)
Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Issues with react-with-styles in electron

I am getting the following error:

Uncaught TypeError: makeFromTheme is not a function
    at /Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/node_modules/react-with-styles/lib/ThemedStyleSheet.js:63:40
    at Array.forEach (native)
    at Object.create (/Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/node_modules/react-with-styles/lib/ThemedStyleSheet.js:58:23)
    at withStyles (/Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/node_modules/react-with-styles/lib/withStyles.js:79:59)
    at Object.<anonymous> (/Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/src/react/full-logo/full-logo.component.jsx:30:47)
    at Object.<anonymous> (/Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/src/react/full-logo/full-logo.component.jsx:74:3)
    at Module._compile (module.js:571:32)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/jwaldrip/dev/src/github.com/CommercialTribe/companion/node_modules/electron-compile/lib/require-hook.js:77:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

How does withStyles become aware of ThemedStyleSheet?

I made a ThemedStyleSheet.js and registered a default theme (exactly like the docs example), but I am getting errors that say that my component theme.default is undefined. Am I supposed to export ThemedStylesheet.js and import it somewhere? I am confused how context is getting set without somehow wrapping my app with ThemeProvider?

Cannot simulate enzyme events when wrapping components in react-with-styles

It's impossible to test for component events in enzyme when wrapping components with react-with-styles. I wasn't sure if I should submit this here or in enzyme but this seems more related to withStyles.

import React from 'react';
import { css, withStyles } from './withStyles';

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {
      toggled: false,
    };
  }
  
  onClick() {
    this.setState({toggled: !this.state.toggled});
  }

  return (
   if (this.state.toggled) {
     return (
       <div className='clickable' onClick={this.onClick.bind(this)}>
         <div {...css(withStylesStyles.container)}>
           <span className='toggled'>Toggled</span>
         </div>
        </div>
     );
   }
  return (
    <div className='clickable' onClick={this.onClick.bind(this)}>
       <div {...css(withStylesStyles.container)}>
         <span className='not-toggled'>Not Toggled</span>
       </div>
    </div>
  );
}

export default withStyles(({ color, unit }) => ({
  container: {
    color: color.primary,
    marginBottom: 2 * unit,
  },
}), { stylesPropName: 'withStylesStyles' })(MyComponent);
import { expect } from 'chai';
import { shallow } from 'enzyme';
import React from 'react';

describe('MyComponent', () => {
  describe('#onClick', () => {
    //Does not work
    it('should display the toggled content after being clicked for the first time', () => {
      const wrapper = shallow(<MyCompoent />);
      expect(wrapper.html()).to.contain('.not-toggled');
      wrapper.dive().find('.clickable').prop('onClick')();
      expect(wrapper.html()).to.contain('.toggled');
    });
  });
});

[Request] Provide access to generated styles (provide access to styles[]._definition)

Hi! Any chance you can cover this use case (or may be you already do, and I overlooked it):

Suppose I have this styles

({ colors }) => {
        snackBar_error: {
            backgroundColor: colors.error,
            fontWeight: 'bold'
        },

In certain situations, I'd like to just have direct access to that generated style instead of consuming it through css(). This is useful to me in 2 situations:

  • When using external libraries that require styles (this example is an actual snackbar from material-ui)
  • In some cases I find it better to only decorate the top level containers/components and pass a few props (like colors) to children and have them decoupled from any other dependencies.

I know I can use this.props.styles.snackBar_error._definition on my component but that seems very prone to change. Do you think that exposing that in a tidy way may cause any problems, or that will go against maintainability/encapsulation? Or how do you recommend to handle this cases?

Thank you very much!! I really like this library!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.