web-dev-qa-db-ja.com

スタイル付きコンポーネントでclassNameを定義する方法

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コンポーネントは、クラスをアタッチする親からプロップをインポートしています。たとえば、最初のリストアイテムは、クリックされたときにそのリストアイテムをインデントし、他のすべてのリストアイテムのインデントを解除します。これはすべて親の状態で保持されます。これまでのところすべて良い。現在、このインデントされたクラスは、scssファイルで定義されています。

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

インデントされたクラスを含むscssファイルを保持したくありません。プロジェクトからscssファイルをドロップキックできるように、MainNavDivコンポーネントのどこかに定義する必要があります。しかし、私はそれを実装する方法について混乱しています。

どういうわけか 'attrs'メソッドを使用できますか？：

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

Scssファイル内以外のmain-nav__indentedクラスをどこでどのように定義しますか？

reactjsstyled-components
4
flimflam57

classNameプロップを削除して、プロップを追加できますisIndented={props.linkIndentHome} props.linkIndentHomeは、インデントされているかどうかを表すtrueまたはfalseを保持するブール値です。

プロップを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
`}
`
7
johnny peter