【styled-components】styled(Component)でクラス名が付与されない
6224 ワード
あまりにも何回もやってしまうのでメモ。
styled-components
ではstyled.div
とする以外に、既存のコンポーネントにstyled(Component)
とする方法がある。
styled.div
import styled from "styled-components"
export const Component = styled.div`
display: flex
align-items: center
justify-content: center
`
styled()
import styled from "styled-components"
import { BaseComponent } from "../components"
export const Component = styled(BaseComponent)`
display: flex
align-items: center
justify-content: center
`
classNameを記述
React.FCコンポーネントをstyled(Component)
でスタイリングする場合、classNameを受け取れるようにしておく必要がある。
OK
import React from 'react';
type Props = {
className?: string;
};
const BaseComponent: React.FC<Props> = props => {
return (
<div className={props.className}>
<div className="flex-center">{props.children}</div>
</div>
);
};
export const Component = styled(BaseComponent)`
.flex-center {
display: flex
align-items: center
justify-content: center
}
`;
NG
import React from 'react';
const BaseComponent: React.FC= props => {
return (
<div>
<div className="flex-center">{props.children}</div>
</div>
);
};
export const Component = styled(BaseComponent)`
.flex-center {
display: flex
align-items: center
justify-content: center
}
`;
Author And Source
この問題について(【styled-components】styled(Component)でクラス名が付与されない), 我々は、より多くの情報をここで見つけました https://qiita.com/ragnar1904/items/33d5c6bff7bb548f14c6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .