如何在样式化组件中定义class Name

Question

我正忙于重构React项目以使用样式化组件。它目前正在使用SASS。所以，我有一个工作组件：

import React from 'react';
import styled from 'styled-components';

const MainNavDiv = styled.div`
  display: none;
  font-weight: 300;
  font-size: 1.7rem;
  background-color: #F5F5F5;
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  border-top: #D3D3D3 solid 1px;
  border-bottom: #D3D3D3 solid 1px;
  z-index: 3;
  @media (min-width: 51rem) {
    display: block;
  }
`;

const Ul = styled.ul`
  list-style-type: none;
  margin: 0;
  padding: 0;
`;

const Li = styled.li`
  border-bottom: 1px dotted #D3D3D3;
  text-indent: 3rem;
  padding: .5rem 0 .5rem 0;
  height: 2.1rem;
  & :last-child {
    border: none;
  }
  & a {
    text-decoration: none;
    color: #000;
    WebkitTransition: text-indent 0.5s ease, color 0.5s ease;
    MozTransition: text-indent 0.5s ease, color 0.5s ease;
    transition: text-indent 0.5s ease, color 0.5s ease;
    display: block;
    width: 200px;
  }
  & :hover {
    text-indent: 4rem;
    & a {
      color: $secondary-color;
    }
  }
  & span {
    font-size: 1.3rem;
  }
`;

 const MainNav = (props) => {
    return (
      <MainNavDiv>
        <Ul>
          <Li className={props.linkIndentHome}><a href="#" onClick={props.homeContent}>HOME</a></Li>
          <Li className={props.linkIndentSonata}><a href="#" onClick={props.sonataContent}>SONATAS <span>(adults)</span></a></Li>
          <Li className={props.linkIndentIntermezzo}><a href="#" onClick={props.intermezzoContent}>INTERMEZZI <span>(adults)</span></a></Li>
          <Li className={props.linkIndentSonatina}><a href="#" onClick={props.sonatinaContent}>SONATINA <span>(Children)</span></a></Li>
          <Li className={props.linkIndentDatesFees}><a href="#" onClick={props.datesFeesContent}>DATES & FEES</a></Li>
          <Li className={props.linkIndentLive}><a href="#" onClick={props.liveContent}>LIVE! & CHAT</a></Li>
          <Li className={props.linkIndentVideoArchive}><a href="#" onClick={props.videoArchiveContent}>VIDEO ARCHIVE</a></Li>
          <Li className={props.linkIndentGeneral}><a href="#" onClick={props.generalContent}>GENERAL</a></Li>
          <Li className={props.linkIndentMisc}><a href="#" onClick={props.miscContent}>MISC</a></Li>
        </Ul>
      </MainNavDiv>
    )
 };

export default MainNav;

每个Li组件都从附加一个类的父组件导入一个prop。例如，第一个列表项将在单击时缩进该列表项，并取消缩进所有其他列表项。这都保持在父状态。到目前为止一切都好。现在，这个缩进类在一个scss文件中定义：

.main-nav__indented {
  border-bottom: 1px dotted $secondary-color !important;
  & a {
    text-indent: 5rem;
    color: $secondary-color !important;
  }
}

我不想让那个scss文件隐藏那个缩进类。它应该在我的Main NavDiv组件中的某个地方定义，这样我就可以将该scss文件从我的项目中删除。但是我对如何实现它感到困惑。

我可以使用“attrs”方法吗

const MainNavDiv = styled.div.attrs({
  className = // something here
})`
  display: none...
  ...
`;

除了在scss文件中之外，我如何以及在何处定义main-nav__缩进类？

Answer 1

如果您想使用默认类名，那么在我的例子中，我的项目也是typescript，所以我也必须指定类型

let Container = styled.div.attrs<LayoutProps| 

SpaceProps|HTMLAttributes<any>>(props=>{
  return  {className: `${props.className} container`}
})`
${layout}
${flex} 
${space}

Answer 2

您可以删除classNameprop并添加一个isindended={props.linkIndentHome}props。linkIndentHome是一个bool，用于表示其是否缩进。

将道具传递给Li组件，并在那里使用它来做出决定。像下面这样的东西：

const Li = styled.li`
  border-bottom: 1px dotted #D3D3D3;
  text-indent: 3rem;
  ...other styles
  ${props => props.isIndented && `
    border-bottom: 1px dotted
    ...whatever other styles for indentation
`}
`