withStyledClassNames 🤡
This is a tiny (666 bytes gzipped) zero dependency helpful utility function for styled-components
which helps
to override 3rd parties components with custom className
props for their deep
nested children or different states. For example activeClassName
, or
inputClassName
etc.
Installation
Yarn:
yarn add with-class-names
npm:
npm install with-class-names --save
Usage example
You basically pass 3rd party Component to be styled, and then an object with
keys as name of the props, and values as Tagged Template Literals with CSS,
or with styled-component
from which styles will be derived.
Take a look at the example that have both of the options.
Simple:
import css from 'styled-components'import withStyledClassNames from 'with-styled-class-names'import WithNestedClassNames from './WithNestedClassNames' const StyledComponent = extend` margin: 2px; background: blue;`
More detailed example:
import withStyledClassNames from 'with-styled-class-names'import styled css from 'styled-components' // 3rd party component with nested classNames optionsconst Component = className nestedClassName anotherNestedClassName objectClassNamesList = first: second: ...props const first second = objectClassNamesList return <div = > 'Root' <div => 'Nested One Level' <div =>Another nested</div> <div =>Another first</div> <div =>Another second</div> </div> </div> // styled-component which from you would like to derive stylesconst DerivedFromStyledComponent = styleddiv` background: palevioletred; color: ; &:hover { background: mediumaquamarine; }` // Usage // arg0: (key: NestedClassNameProp, value: Tagged Template Literal/StyledComponent)// arg1: Component to styleconst StyledComponent = extend` background: black; color: ;`;
API
withStyledClassNames
Curried withStyledClassNames({}, Comp)
or withStyledClassNames({})(Comp)
is possible.
Returns styled-component, so call .extend is possible and it will style root/container of the component.
Arguments:
- styledMap:
ClassNamesProps: Object(key: classNameProp, value: TemplateLiteralCSS/StyledComponent)
- Component:
Any React Component
Returns: StyledComponent
// All possible combintaions
withStyledClassNames(
ClassNamesProps,
Component
)
withStyledClassNames(ClassNamesProps)(Component)
Hacks and hints
Function return StyledComponent, so you can continue chaining its functions like
extend`background: red;`
To style container. And then to extend it further if you will export this component to outside world.
Hence withComponent
and other handy styled reusage functions are here.
Another option to style main container is by using className prop like the others.
Note that you need to use css
helper function from styled-component in this case, to
have interpolation functions to work. (if you know how to solve that please PR)
Known issues
If you want to interpolations to work for nested classNames please use css
from
styled-components
like in the examples here. PR Welcome to fix that 😍
I gave up trying 😇