styled-components

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

styled-complementsは典型的なCSS in JSライブラリであり、JavaスクリプトファイルのCSSが利用可能であり、Reactフレームワークを主なターゲットとするライブラリである.
もちろん、このような内線の造形があまり好きではない人もいます.
また、私も内蔵造形が好きではありません.
それでもstyled-componsesを使用した理由は、
まずReactについては,コンポーネント数が増えるにつれて,分離したCSSファイルの検索と修正がますます煩わしくなり,煩わしい.
styled-componsesを使用する場合は、CSSコンポーネントをJSXにすることができます.
また、重要な要因は、CSSでPropsを使用できることです.
応答の主なメカニズムの1つとしてPropsをCSSに適用できるため、styled-conntsを一部の素子に適用すると大きな効率をもたらす可能性がある.
styled-conentsは現在、npmで毎週約160万回ダウンロードされ、人気のあるポップライブラリとなっている.

styled-コンポーネントのインストール

npmまたはyarnを使用して簡単にインストールできます.
(1)npmインストールコマンド
npm install styled-components
(2)Yarnインストールコマンド
yarn add styled-components
インストールが完了すると、
導入して本格的に使えばいい!

METHOD 2: Styling links using 'styled.componentName' format.

If you are familiar with styled components, you should know that styled is like the very basic thing you import from styled-components. styled together with 'tagNames' (e.g div or li or h1 etc) or a valid component name can be used to apply styles to a component.
The reason why we can use the latter one i.e component name, is because we have imported a component here that is Link , now we can pass this Link like this:

const StyledLink  = styled(Link)`
     //some CSS styles here
`;

Explanation : I know this one's a little tricky but here it goes. So basically what we are doing here is, we are creating a new component and telling it, "Hey I am a new component and I want to be like Mr.Link but in a stylish manner, so I am going to take all of the Mr.Link characteristics and add a little bit a style of my own". So in the end the code looks something like this:

const StyledLink = styled(Link)`
  color: Blue;
  text-decoration: none;
  margin: 1rem;
  position: relative;
`;

function Nav() {
  return (
    <NavUnlisted>
      <StyledLink to="/">Home</StyledLink>
      <StyledLink to="/about">About</StyledLink>
    </NavUnlisted>
  );
}

Solution : Now you can style your Link directly by creating another component instance i.e StyledLink, and then applying style to it.
Conclusion : This is a cleaner way than METHOD-1 because unlike in the earlier method, here we are actually writing CSS. What I meant by is that - in METHOD-1,we had to write textDecoration instead of text-decoration . Are you just noticing this now ? Greatttt !