\n \n A link to somewhere\n \n\n {' '}\n and\n {' '}\n\n \n a link to somewhere else\n \n
\n );\n}\n\nMyComponent.propTypes = propTypes;\n\nexport default withStyles(({ color }) => ({\n firstLink: {\n color: color.primary,\n },\n\n secondLink: {\n color: color.secondary,\n },\n}))(MyComponent);\n```\n\nYou can also use [the `useStyles` hook or a decorator](#withstyles-stylesthunk--options--).\n\n---\n\n## Documentation\n\n### `withStyles([ stylesThunk [, options ] ])`\n\nThis 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.\n\n`stylesThunk` will receive the theme as an argument, and it should return an object containing the styles for the component.\n\nThe wrapped component will receive the following props:\n\n1. `styles` - Object containing the processed styles for this component. It corresponds to evaluating `stylesInterface.create(stylesThunk(theme))` (or their directional counterparts).\n2. `css` - Function to produce props to set the styles with on an element. It corresponds to `stylesInterface.resolve` (or their directional counterparts).\n3. `theme` - This is the theme object that was registered. You can use it during render as needed, say for inline styles.\n\n#### Example usage\n\nYou can use `withStyles()` as an HOC:\n\n```jsx\nimport React from 'react';\nimport { withStyles } from './withStyles';\n\nfunction MyComponent({ css, styles }) {\n return (\n
\n Try to be a rainbow in someone's cloud.\n
\n );\n}\n\nexport default withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n}))(MyComponent);\n```\n\nAs a decorator:\n\n```jsx\nimport React from 'react';\nimport { withStyles } from './withStyles';\n\n@withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n}))\nexport default function MyComponent({ styles, css }) {\n return (\n
\n Try to be a rainbow in someone's cloud.\n
\n );\n}\n```\n\nYou can also use the experimental hook:\n\n```jsx\nimport React from 'react';\nimport useStyles from 'react-with-styles/lib/hooks/useStyles';\n\nfunction stylesFn({ color, unit }) {\n return ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n });\n}\n\nexport default function MyComponent() {\n const { css, styles } = useStyles({ stylesFn });\n return (\n
\n Try to be a rainbow in someone's cloud.\n
\n );\n}\n```\n\n#### Options\n\n##### `pureComponent` (default: `false`)\n\nBy 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.\n\nIf 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+.\n\n#### `stylesPropName` (default: `'styles'`)\n\nBy 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.\n\n```jsx\nimport React from 'react';\nimport { withStyles, withStylesPropTypes } from './withStyles';\n\nfunction MyComponent({ withStylesStyles, css }) {\n return (\n
\n Try to be a rainbow in someone's cloud.\n
\n );\n}\n\nMyComponent.propTypes = {\n ...withStylesPropTypes,\n};\n\nexport default withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n}), { stylesPropName: 'withStylesStyles' })(MyComponent);\n```\n\n##### `cssPropName` (default `'css'`)\n\nThe css prop name can also be customized by setting the `cssPropName` option.\n\n```jsx\nimport React from 'react';\nimport { withStyles, withStylesPropTypes } from './withStyles';\n\nfunction MyComponent({ withStylesCss, styles }) {\n return (\n
\n Try to be a rainbow in someone's cloud.\n
\n );\n}\n\nMyComponent.propTypes = {\n ...withStylesPropTypes,\n};\n\nexport default withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n}), { cssPropName: 'withStylesCss' })(MyComponent);\n```\n\n##### `themePropName` (default `'theme'`)\n\nThe theme prop name can also be customized by setting the `themePropName` option.\n\n```jsx\nimport React from 'react';\nimport { withStyles, withStylesPropTypes } from './withStyles';\n\nfunction MyComponent({ css, styles, withStylesTheme }) {\n return (\n
\n \n Try to be a rainbow in someone's cloud.\n \n
\n );\n}\n\nMyComponent.propTypes = {\n ...withStylesPropTypes,\n};\n\nexport default withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n}), { themePropName: 'withStylesTheme' })(MyComponent);\n```\n\n##### `flushBefore` (default: `false`)\n\nSome 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.\n\n### `css(...styles)`\n\nThis 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()`.\n\n```jsx\nimport React from 'react';\nimport { withStyles, withStylesPropTypes } from './withStyles';\n\nconst propTypes = {\n ...withStylesPropTypes,\n};\n\nfunction MyComponent({ css, styles, bold, padding, }) {\n return (\n
\n Try to be a rainbow in{' '}\n \n someone's cloud\n \n
\n );\n}\n\nMyComponent.propTypes = propTypes;\n\nexport default withStyles(({ color, unit }) => ({\n container: {\n color: color.primary,\n marginBottom: 2 * unit,\n },\n\n link: {\n color: color.secondary,\n },\n\n link_bold: {\n fontWeight: 700,\n },\n}))(MyComponent);\n```\n\n### `ThemedStyleSheet` (legacy)\n\nRegisters themes and interfaces.\n\n**⚠️ 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.\n\n#### `ThemedStyleSheet.registerTheme(theme)` (legacy)\n\nRegisters the theme. `theme` is an object with properties that you want to be made available when styling your components.\n\n```js\nimport ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';\n\nThemedStyleSheet.registerTheme({\n color: {\n primary: '#FF5A5F',\n secondary: '#00A699',\n },\n});\n```\n\n#### `ThemedStyleSheet.registerInterface(interface)` (legacy)\n\nInstructs react-with-styles how to process your styles.\n\n```js\nimport ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';\nimport AphroditeInterface from 'react-with-styles-interface-aphrodite';\n\nThemedStyleSheet.registerInterface(AphroditeInterface);\n```\n\n---\n\n## Other Examples\n\n### With React Router's `Link`\n\n[React Router][react-router]'s [``][react-router-link] and [``][react-router-index-link] 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()`][react-router-with-router] Higher Order Component to pass `router` as prop to your component and toggle styles based on [`router.isActive(pathOrLoc, indexOnly)`](react-router-is-active). This works because `` passes down the generated `className` from `css(..styles)` down through to the final leaf.\n\n```jsx\nimport React from 'react';\nimport { withRouter, Link } from 'react-router';\nimport { css, withStyles } from '../withStyles';\n\nfunction Nav({ router, styles }) {\n return (\n