如何在样式组件中定义类名

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 组件都从附加 class 的父级导入一个道具。例如，第一个列表项将在单击时缩进该列表项，并取消缩进所有其他列表项。这一切都保存在父状态中。到目前为止一切都很好。现在，这个缩进的 class 在 scss 文件中定义：

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

我不想保留包含缩进 class 的 scss 文件。它应该在我的 MainNavDiv 组件中的某处定义，这样我就可以将该 scss 文件从我的项目中删除。但我对如何实施它感到困惑。

我可以用某种方式使用 'attrs' 方法吗？:

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

除了在 scss 文件中之外，如何以及在何处定义 main-nav__indented class？

Answer 1

您可以删除 className 属性并添加一个属性 isIndented={props.linkIndentHome} props.linkIndentHome 是一个布尔值，表示是否缩进。

将 prop 传递给 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
`}
`

Answer 2

如果你想要默认类名使用这个，在我的例子中我的项目也是打字稿所以我也必须指定类型

let Container = styled.div.attrs<LayoutProps| 

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

如何在样式组件中定义类名

How to define className in styled components

reactjs

styled-components