How to Use Classes in Styled-Component

Question

I am new to styled-component. I want to convert custom CSS to Styled-Component. I have already used className in React File.

App.js

<div className="left-menus">
      {menus.map(item => {
          return (
            <Link to={item.name} name={item.name} key={item.name}
              className={this.state.activeMenu === item.name ? 'menu active' : 'menu' }
              onClick={() => this.setState({ activeMenu: item.name })}
              >
              <Icon name={item.icon} size="large"/>
              <span>{item.name}</span>
            </Link>
          )
      })}
    </div>

App.css

.left-menus {
  position: fixed;
  width: 200px;
  padding-right: 0 !important;
  background-color: #fff;
  height: 100%;
  margin-top: 20px;
  top: 47px;
  font-size: 12px !important;
  border-right: 2px solid #e8e8ec; }
  .left-menus .menu {
    color: #4a4a4a;
    width: 100%;
    display: block;
    cursor: pointer;
    text-transform: capitalize !important;
    padding: 15px 10px 15px 18px; }
    .left-menus .menu .angle.down.icon,
    .left-menus .menu .angle.up.icon {
      right: 10px;
      position: absolute; }
  .left-menus .menu .icon:first-child {
    margin-right: 10px; }
  .left-menus .menu.active {
    border-right: 4px solid #3cbfc8;
    background-color: #f8f8f8; }
  .left-menus .sub-menu-container .sub-menu {
    display: none;
    height: 0;
    transition: 0.3s all ease; }
  .left-menus .sub-menu-container.active .sub-menu {
    display: block;
    height: 100%;
    text-transform: capitalize;
    transition: 0.3s all ease; }
    .left-menus .sub-menu-container.active .sub-menu a {
      color: #4a4a4a; }
    .left-menus .sub-menu-container.active .sub-menu .icon {
      margin: 10px 10px 0 10px; }

https://stackoverflow.com/q/38545219/1531971 related if not a duplicate. There are others. So you should show your research. — , Mar 07 '19 at 15:41
just from a style and maintenance perspective, you might want to consider moving away from deeply nested CSS trees like that. you don't necessarily need class name structures with styled-components — worc, Mar 12 '19 at 17:02

score 0 · Answer 1 · answered Mar 07 '19 at 18:45

CSS with a class selector will only match elements that are members of a class.

To give a styled component that class, you need to do it when you instantiate it.

For example:

const MyStyledComponent = styled.div`

background: red; `;

const myFunctionComponent = () => {
    const myClass = "left-menus";

    return(
        <div>
            Here is MyStyledComponent
            <MyStyledComponent className={myClass}>
                Example
            </MyStyledComponent>
        </div>
    );
}

If you have an existing stylesheet you want to apply, it is likely that styled components are not the right tool for the job.

How to Use Classes in Styled-Component

1 Answers1