-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
styles파일의 분리 문의
22.01.25 17:25 작성 조회수 312
0
안녕하세요? 다음과 같은 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
답변을 작성해보세요.
0
0
답변 2