styles파일의 분리 문의

Question

안녕하세요? 다음과 같은 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 } % < ItemVaue > { props . itemValue } < Count > { props . count } < BarGraph width = { props . percent } isSelected = { props . isSelected } > ) } 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

salus82 · Answer

네 강사님 감사합니다. 새해 복 많이 받으세요

zerocho · Answer

그냥 다른 파일로 그대로 옮기시면 됩니다. 아무 에러 나지 않습니다.