インラインスタイル

5147 ワード

React テキストリンク

インラインスタイルは、HTMLでタグにスタイル属性を追加するために使用されます.
同様に、応答では、コンポーネント/一般ラベルにスタイルプロパティを指定できます.
ただし、JSX構文によってHTMLに適用する方法とは異なります.

styleの価値は客体形態である.

CSS属性名camel case.

import React from 'react';

const PracticeStyle = () => {
  return (
    <div style={{marginTop: 10px; backgroundColor: red}}>
      스타일을 적용해보자.
    </div>
  );
}

export default PracticeStyle

インラインスタイルの問題

・{} === {}はいfalseですので、レンダリング時にライン内スタイルが適用されたエレメント/一般ラベルが異なると思われるため、ドームを再描画すると不要な再ロードが発生する

style属性の再使用性低下

解決策

変数として設定

import React from 'react';

const PracticeStyle = () => {
  const style = {
    marginTop: "10px", 
    backgroundColor: "red"
  }
  
  return (
    <div style={style}>
      스타일을 적용해보자.
    </div>
  );
}

export default PracticeStyle

使用スタイルコンポーネント

import React from 'react';
import styled from 'styled-components';

const DivStyle = styled.div`
  margin-top: 10px; 
  background-color: red;
`;

const PracticeStyle = () => {
  
  return (
    <DivStyle />
  );
}

export default PracticeStyle

Reference

この問題について(インラインスタイル), 我々は、より多くの情報をここで見つけました https://velog.io/@hqillz/인라인-스타일

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

REST APIとFetch API

MySQL