Can we use styled components export className ?

Consider the following code:

const Wrapper = styled.div`
  &-icon {
    color: #fff;
  }
`
render() {
  const cls = Wrapper.getClassName();
  return <Wrapper>
   <div className={`${cls}-icon`}>xxx</div>
</Wrapper>
}

This saves a lot on the definition of the styled component。

[mrbone]

Well, But I want to get the className related to styled.

What for? The nice thing about styled-components is that you don’t have to worry about the specifics of classes all that much.

The above code is same with the following:

That only works as long as they’re all in the same file. Also, attaching the className to the component as a property makes the relationship between the class and the component it belongs to clearer – after all the class won’t work outside of Wrapper.

Please forgive my poor English.

Your English is fine 😃

Same issue, the use case is we need assign a classname to a 3rd UI library to some sub component, eg:

import { css } from 'styled-components';
const generatedCss = css`
  color: red;
`;

const extractFromStyledCss =  generatedCss.getClassName();

<AwesomeSelect dropdownClassname={extractFromStyledCss}>

</AwesomeSelect>

[martindines]

Hi @d640k

You can convert a styled-component to a string to retrieve it’s CSS Selector:

const Handle = styled.div``
console.log(Handle.toString(), String(Handle), `${Handle}`)

Output:
.sc-clNaTc .sc-clNaTc .sc-clNaTc