styles파일의 분리 문의

안녕하세요? 다음과 같은 props값을 는 경우에 styles 코드만 따로 분리하려 합니다.

A.js(다음의 코드) Astyles.js(styled-components 따로 분리하려는 새 파일)

isSelected는 어떻게 처리해야하는지, 궁금합니다.

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

const Bar = (props) => {
    return (
        <BarWrapper onClick={props.handleClickBar} isSelected={props.isSelected}>
            <BarInfo>
                <Percent>{props.percent}%</Percent>
                <ItemVaue>{props.itemValue}</ItemVaue>
                <Count>{props.count}</Count>
            </BarInfo>
            <BarGraph width={props.percent} isSelected={props.isSelected}></BarGraph>
        </BarWrapper>
    )
}

const BarWrapper = styled.div`
    position: relative;
    margin-bottom: 3px;
    padding: 8px 0;
    background: ${({isSelected}) => isSelected ? '#dddddd' : '#f3f3f3'};
`
const BarInfo = styled.div`
    width: 100%;
    display: flex;
    z-index: 2;
    position: relative;
`
const Percent = styled.span`
    text-align: right;
    min-width: 70px;
    flex: 0 0 auto;
`
const ItemVaue = styled.span`
    padding-left: 60px;
    flex: 1 1 0%;
`
const Count = styled.span`
    padding-right: 20px;
    flex: 0 0 auto;
`
const BarGraph = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    width: ${({width}) => width}%;
    transition: width 1.5s ease;
    height: 100%;
    background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
    z-index: 1;
`

export default Bar

인프런 커뮤니티 질문&답변