styled-component

reactでcssファイルを生成するのではなく、簡単にモデリングする方法があります.それはstyled-componentを利用して、使い方は簡単です.

設定

npm add styled components / yarn add styled components

インストール後import

import styled from "styled-components";

準備ができたら、すぐに造形すればいいです.
classを定義する必要はありません.コンポーネントスタイルを直接与えることができます.
たとえば、

lass App extends React.Component {

  render() {
    return (
      <section>
        <Container>
  	  <Button>Hello</Button>
          <Button danger>Hello</Button>
        </Container>
      </section>
    );
  }
}

const Container = styled.div`
  height: 400px;
  width: 400px;
  background-color: pink;
`;

const Button = styled.button`
  border-radius: 50px;
  padding: 5px;
  min-width: 120px;
  color: #fff;
  font-weight: 600;
  -webkit-appearance: none;
  cursor: pointer;
  &:active,
  &:focus {
    outline: none;
  }
  background-color: ${(props) => (props.danger ? "#e74c3c" : "#2ecc71")};
`;

export default App;

以下の結果が得られる.マークはなく、ハングルで残します.
方法は簡単です.コンポーネント内のみ
const Container = styled.div`(backtic)css造形...エンド
構成部品変数を作成してstyledするだけです.(htmlラベル)後にbackticcss backticを行うと有効になります.

background-color: ${(props) => (props.danger ? "#e74c3c" : "#2ecc71")};

このように、道具を手に入れてスタイルを増やすことができます.

injectGlobal

bodyを変更する場合は、以下に示すinjectglobalを追加し、変更後に終了します.

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

createGlobalStyle`
  body{
    padding:0;
    margin:0;
  }
`;

スタイルの拡張

<Anchor href="http://google.com">Go to google</Anchor>
const Anchor = styled(Button.withComponent("a"))`
  text-decoration: none;
`;

方法はstyled(Button[extend to component].withComponent(「a」)backtic
[追加するcss]backticだけで終了reactは、propsを提供する必要がなく、aタグのhrefとして動作する、Anchorコンポーネントでhrefを知っている.

アニメーションキー(Animation Key)

実は使ってから習ったことがあります...そんなに快適ではないようです.ただ状況と好みが違うようです.とりあえずアニメを使うならimportを作る

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

const rotation = keyframes`
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }`;

setAttribute

cssが繰り返されると、コピーと貼り付けはかなり面倒なことです.だからstyled-componentはこのことを簡単に処理することができて、方法は簡単です.

const awesomeCard = css`
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
`;

const Input = styled.input.attrs({
  required: true,
})`
  border-radius: 5px;
  border: none;
  ${awesomeCard}
`;

awesomeCardコンポーネントがcssを提供する場合は、cssテンプレートボックスを作成できます.だからこれは与える素子ですattrs({required:true})に設定すると、追加するcssと${awesomeCard}を指定できます.

theme

私はあなたにthemeを設定することもできます.これも再インポートします.styled-comonentでスタイリングする場合は、最初からインポートすることをお勧めします.

import styled, {
  css,
  keyframes,
  createGlobalStyle,
  ThemeProvider,
} from "styled-components";

テーマもjsという名前のファイルを作成した後、まずその例を記述します.そして輸入した

const theme = {
  mainColor: "#3498db",
  dangerColor: "#e74c3c",
  successColor: "#2eccc71",
};

export default theme;


//App.js에서
import theme from "./theme.js";

そしてそのまま入れて終わりです.

<ThemeProvider theme={theme}>
	<Container>
		<Form></Form>
	</Container>
</ThemeProvider>


const Card = styled.div`
  background-color: red;
`;

const Button = styled.button`
  border-radius: 30px;
  padding: 25px 15px;
  background-color: ${(props) => props.theme.mainColor};
`;

const Form = () => (
  <Card>
    <Button></Button>
  </Card>
);

ThemeProviderという名前のコンポーネントを作成すると、theme={theme}というpropsが送信されます.これにより、必要なコンポーネントから受け取ったpropsを使用して造形することができます.${(props) => props.theme.mainColor};