front-mockup(1)Styled Component

期間
2021/11/4 ~ 2021/11/9
「メールの作成」ページ

<CKEditor />

<Select />

<Datepicker />

Styled Component

Node-schedule || cron

<Modal />

Styled Component

//Adapting based on props
const Button = styled.button`
background: ${props => props.primary? "palevioletred" : "white"};
color: ${props => props.primary? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
  <div>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
  </div>
)

const StyledButton = styled.button`
  background: ${(props) => (props.send ? "palevioletred" : "white")};
  color: ${(props) => (props.send ? "white" : "palevioletred")};
  float: ${(props) => (props.send ? "right" : "left")};
  &:hover {cursor: pointer}; //hover되었을때 cursor 변경시키기
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
render(
  <div>
      <StyledButton>Normal</StyledButton>
  </div>
)

//extending styles
const Button = styled.button`
color:palevioletred;
font-size:1em;
margin:1em;
padding:0.25em 1em;
border:2px solid palevioletred;
border-radius:3px;
`;

const TomatoButton = styled(Button)`
color:tomato;
border-color:tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

reference

https://styled-components.com/docs/basics#installation

styledcomponentを使用して、次のメリットとデメリットを発見しました.

長所

自由度を伝達することによって、条件に応じて同じ素子を繰り返し使用しても、異なるcssを適用することができる.

類の名前は考えなくてもいいです.

追加クラスを適用する場合、他のタグと同様にclassName=""に追加できます.

react-router-domが提供するなど、新しく作成された構成部品や、既存の構成部品をモデリングすることができます.

短所

は、まだ知られていないため、認知スタイルコンポーネントに他のサブコンポーネントを加える場合、親コンポーネントに適用されるdisplay:flexの属性に従って、flex:1 1 autoはサブコンポーネントに適用されない.したがって、<div>ラベルで再ラップし、このdiv display:flexプロパティを与えます.

の公式ファイルによると、いくつかの制限があります.そのうちの1つは、スタイルコンポーネントを埋め込むスタイルを推奨しないことです.医師やメディアクエリーが使えず、ブラウザの互換性、camel-caseなどに懸念があるためだ.これらの制約要因をよく知らないと、後で問題に直面する可能性があります.

きっと.

レンダリング方法に加えて、スタイルコンポーネントを定義する必要があります.