styled-components

35067 ワード
React styled component テキストリンク

styled-コンポーネントとは?


CS-In-JS造形フレームワークは、
  • JavaScriptでcssを使用するのに役立ちます.
  • 様式−コンポーネントは、コンポーネントシステムの造形に応答するためにCSSをどのように高めるかについて興味深い結果である.
  • ReactもReact Nativeも使用できます.

    • 応答構成部品のモデリング


    React構成部品のスタイルを指定する方法はいくつかあります.

    外部CSSファイルでのCSSの使用


    これは伝統的な方法です.
    //Movie.module.css
.movie__title {
	background-color: red;
    color: white;
}
    //Movie.js
import styles from "./Movie.module.css";

function Movie({title}) {
	return (
    	<div className={styles.movie__title}>
      		<h1>{title}</h1>
      	</div>
    )
}
    アプリケーションが肥大化すると、cssファイルはますます大きくなり、複雑になります.SASSはソリューションの導入と使用に役立つが,抽象化自体も複雑になり始めている.
    sassはmixinによって汎用モードを有意義で再利用可能なブロックとして抽象化することができる.

    応答コンポーネントでのCSSの使用

    //Movie.js
function Movie({title}) {
	return (
    	<div style={{backgroundColor: "red", color: "white"}}>
      		<h1>{title}</h1>
      	</div>
    )
}
    この方法は持続可能でも拡張可能でもないので,採用は推奨されない.

    CSS-in-JS


    javascriptを使用してコンポーネントスタイルを指定するテクノロジー.
    このJavaScriptを解析すると、CSSはスタイル要素として生成され、DOMに直接添付されます.
    styled-conents、Emotion、JSS、Radium、Aphroditeなどフレームワークが多いです.
    中でもstyled-conentsが一番人気があります.

    styled-conents入門

  • 取付npm i styled-components
  • スタイル-コンポーネントをインポートします.
    • import styled from "styled-components";

    例


    概要レコーダなしコースの例

    1.

    import styled from "styled-components";

const Father = styled.div`
	display: flex;
`;
const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;
const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <BoxOne />
      <BoxTwo />
    </Father>
  );
}
export default App;

    変数の作成時に読み込むスタイル.後ろにHTML要素を書いてbackticを入力し、適用したいスタイルを入力すればいいです.
    次に、スタイルを適用した要素を追加したい部分に、生成した変数名を追加します.

    2.


    上記の例から、スタイルに重複する値があることがわかります.
    より簡潔に適用しましょう.
    import styled from "styled-components";

const Father = styled.div`
	display: flex;
`;
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" /> {/*bgColor는 props로 보낸다.*/}
      <Box bgColor="tomato" />
    </Father>
  );
}
export default App;

    上記の例よりも短いコードで同じ画面を作成します.<Box bgColor="teal" />において、bgColorは固定された値ではない.background-color: ${(props) => props.bgColor}; props. 後ろの文字と同じでいいです.

    3.


    他のスタイルを簡単にインポートして拡張して、スタイルを適用して使用できます.
    import styled from "styled-components";

const Father = styled.div`
	display: flex;
`;
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;
const Circle = styled(Box)`
  border-radius: 50px;
`

function App() {
  return (
    <Father>
      <Box bgColor="teal" /> {/*bgColor는 props로 보낸다.*/}
      <Circle bgColor="tomato" />
    </Father>
  );
}
export default App;
    const Circle = styled(Box) styled. 生成された要素スタイルをカッコ内に挿入することで、後に要素を挿入する必要なく展開できます.

    4. as


    たとえば、Buttonタグにスタイルを適用する場合、Buttonタグだけでなく他のタグにスタイルを適用します.
    上記の例に示すようにstyled()も使用できますが、拡張が目的ではないため、使用には適していません.
    このときasにサインを書いてpropsに送ればいいです.
    import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;
const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <Father>
      <Btn>Log in</Btn>
      <Btn as="a" href="/">
        Log in
      </Btn>
    </Father>
  );
}
export default App;

    buttonラベルに適用されるスタイルは、asを使用してaラベルに置き換えられていることがわかります.

    5. attrs


    以上の方法はスタイルを適用するために使用され、attrsを使用してタグのプロパティを適用することもできます.
    import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;
const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

function App() {
  return (
    <Father as="header">
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );
}
export default App;
    Inputにはすべての必須属性が適用されています.styled.input.attrs({ required: true, minLength: 10 })このようにしてプロパティを追加できます.

    6. animations

    import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    border-radius:100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover {
      font-size: 48px;
    }
    &:active {
      opacity: 0;
    }
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <span>🤩</span>
      </Box>
    </Wrapper>
  );
}
export default App;
    importとkeyframesでアニメーションを与えることができます.(cssの@キーフレームと同じです.)
    次に、スタイルを適用するためにscssのようにstyled.div`` 内にspan{}, &:などのラベルを入力することができる.

    7.


    上記の例では、spanなどのタグ名に基づいてスタイルを適用します.たとえば、タグ名に依存したくない場合.
    import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
`;
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    border-radius:100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  ${Emoji}:hover {
    font-size: 98px;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>🤩</Emoji>
      </Box>
      <Emoji>🔥</Emoji>
    </Wrapper>
  );
}
export default App;
    ${Emoji}:hoverのように、スタイルコンポーネント自体に対して使用することができる.<Box>スキームに適用される<Emoji>万サスペンション.

    8. themes


    ダークモードを実施する場合、50%程度の責任を負うという.(残り50%はローカル状態管理用)
    //App.js
import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;
const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}
export default App;
    //index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
    上の図に示すように、ThemeProviderを使用するとAppになります.jsでは${(props) => props.theme.backgroundColor}を使用し、スタイルを1つずつ変更する必要はなく、ThemeProvider theme={}で指定したobjectの内容を変更するだけで、自分で適用できます.ThemeProvider theme={}の中でLightThemeに変えて、DarThemeは交換したことを知ることができます
    propertyの名前は同じです.

    Reference


    https://dkje.github.io/2020/10/13/StyledComponents
    https://nomadcoders.co/react-masterclass
    https://blog.logrocket.com/benefits-using-styled-components-react
    https://styled-components.com/docs/basics
    経緯度回転図符号化
    白駿11719号(ByC++)