컴포넌트에 style을 직접 적용하는 대신, class를 적용해 본다.
- meteor 기반에서 css 적용의 어려운 부분들
- styled-component를 사용한 적용
- 적용소스
styled-components 적용하기
meteor는 자체 builder를 통해 패키지를 빌드하는 관계로 webpack과 같은 custom 설정에 제약이 있어 보인다. 물론 잘 알지 못해서 아직 찾지 못했을 수도 있지만 다음과 같은 class 적용이 안된다.
- import * as style from './link.scss': from 문구를 사용하지 못 한다. 나머지 다양한 class적용 방법도 잘 안되는 듯 하다.
- import './link.scss' 만 사용가능하다. local 적용이 아닌 global 적용을 한다. <head> 태그에 prefix없이 들어간다.
Meteor의 제약사항을 고려하여 별도의 scss 파일 작성을 최대한 줄이고, 컴포넌트의 style을 확장하기 위해 styled-components를 사용토록 한다.
$ meteor npm install --save styled-components
imports/ui/sdk/eui/flexgroup.style.tsx 파일 을 생성한다.
- 테스트로 확장 컴포넌트로 부터 받은 색을 적용해 본다.
- props는 camelCase로 설정한다.
import styled from 'styled-components';
import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
export const StyledWidthEuiFlexGroup = styled(EuiFlexGroup)`
width: ${props => props.width || '100%'};
`;
export const StyledLongEuiFlexItem = styled(EuiFlexItem)`
max-width: 400px;
input {
background: ${props => props.background || 'yellow'}; // 동적으로 bgcolor를 적용한다.
color: white;
}
`;
export const StyledShortEuiFlexItem = styled(EuiFlexItem)`
max-width: 100px;
`;
AddLink.tsx에서 사용한다.
import { StyledLongEuiFlexItem, StyledShortEuiFlexItem } from '../../sdk/eui/flexgroup.style';
class AddLink extends React.Component<AddLinkProps, any> {
...
makeForm = ({handleSubmit, submitting, pristine}) => {
return (
<form onSubmit={handleSubmit}>
<EuiFlexGroup direction="row" gutterSize="s">
<EuiFlexItem><EInput name="title" component="input" type="text" placeholder="Title" /></EuiFlexItem>
<StyledLongEuiFlexItem background="red">
<EInput name="url" component="input" type="text" placeholder="Url" />
</StyledLongEuiFlexItem>
<StyledShortEuiFlexItem>
<EuiButton type="submit" fill disabled={submitting || pristine}>Add Link</EuiButton>
</StyledShortEuiFlexItem>
</EuiFlexGroup>
</form>
);
}
...
}
Login.tsx에도 적용한다.
- FlexGroup 의 width=600px으로 설정한다.
- JPage, JRow를 설정한다. (아래에서 계속 개발)
import { JPage, JRow } from '../layouts/common.style';
export default class Login extends React.Component<LoginProps, LoginState> {
...
makeForm = ({ handleSubmit, submitting, pristine }) => {
return (
<form onSubmit={handleSubmit}>
<StyledWidthEuiFlexGroup width="600px" direction="row" gutterSize="s">
<EuiFlexItem><EInput name="email" type="email" placeholder="Email" /></EuiFlexItem>
<EuiFlexItem><EInput name="password" type="password" placeholder="Passowrd" /></EuiFlexItem>
<StyledShortEuiFlexItem>
<EuiButton type="submit" disabled={submitting || pristine}>Login</EuiButton>
</StyledShortEuiFlexItem>
</StyledWidthEuiFlexGroup>
</form>
);
};
public render() {
return (
<JPage>
<JRow padding="10px" fontSize="20px">Login to short Link</JRow>
<JRow>{this.state.error ? <p>{this.state.error} </p> : undefined}</JRow>
<JRow><Form onSubmit={this.onLogin} render={this.makeForm} /></JRow>
<JRow><Link to="/signup">Have a account?</Link></JRow >
</JPage>
);
}
}
JPage와 JRow 컴포넌트를 imports/ui/layouts/common.style.ts 생성한다.
- JPage는 padding
- JRow는 flexbox의 row direction으로 설정한 컴포넌트이다.
- 컴포넌트의 properties를 통해 값을 받아 동적으로 설정한다.
import styled from 'styled-components';
export const JPage = styled.div`
display: block;
position: relative;
padding: 10px;
height: 100%;
width: 100%;
`;
export const JRow = styled.div`
display: flex;
justify-content: ${ props => props.align || 'flex-start' };
align-items: ${ props => props.align || 'center' };
width: ${ props => props.width || '100%' };
padding: ${ props => props.padding || '5px' };
font-size: ${ props => props.fontSize || '14px' };
`;
styled-components를 통해 얻을 수 있는 장점
- 기존 컴포넌트의 style 확장을 컴포넌트 개념을 할 수 있다. 기존은 .css 작성
- 일반 태그를 style을 동적으로 적용할 수 있는 컴포넌트로 만들어 React컴포넌트에서 Common 컴포넌트처럼 사용할 수 있다. 즉 Style만을 담당하는 컴포넌트임.
<참조>
'Meteor > React + Meteor' 카테고리의 다른 글
| [React + Meteor] 개발환경 설정 - 6 (0) | 2018.12.03 |
|---|---|
| [React + Meteor] 개발환경 설정 - 5 (0) | 2018.11.30 |
| [React + Meteor] 개발환경 설정 - 4 (0) | 2018.11.28 |
| [React + Meteor] 개발환경 설정 - 3 (0) | 2018.11.22 |
| [React + Meteor] 개발환경 설정 - 2 (0) | 2018.11.16 |