propsとして渡された物(users)をmapで回して一つ一つLabelコンポーネントのなかに入れて表示させています。
Labelコンポーネントはpタグなのですがなぜかusersで回したuserが横並びで表示されず縦に表示されてしまいます。
原因わからず、、、
わかる人いましたらご教授お願いしたいです。
追記
開発環境は以下になります
・react next.js typescript styled-componentys
import { Text } from "components/atoms/Text"; import React, { FunctionComponent } from "react"; import styled from "styled-components"; type User ={ user: any; } export const User: FunctionComponent<Props> = ({ user }) => { return ( <> {users.map((user, i) => ( <Label key={i}>{user}</Label> ))} </> ); };
import React, { FunctionComponent } from "react"; import styled from "styled-components"; const Div = styled.p<{ weight: number; size: number; color: string; }>` margin: 0; font-weight: ${(props) => props.weight}; font-size: ${(props) => props.size}px; color: ${(props) => props.color}; `; Div.defaultProps = { weight: 400, size: 12, }; type Props = { weight?: number; size?: number; color?: string; className?: string; }; export const Text: FunctionComponent<Props> = ({ weight, size, color, children, className, }) => { return ( <Div weight={weight} size={size} color={color} className={className} > {children} </Div> ); };
回答1件
あなたの回答
tips
プレビュー