React:Elementにスタイルを追加する
エリメントにスタイルを着せましょう。
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<style>
.button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
background-color: #008cba;
} /* Blue */
.button3 {
background-color: #f44336;
} /* Red */
.button4 {
background-color: #e7e7e7;
color: black;
} /* Gray */
.button5 {
background-color: #555555;
} /* Black */
</style>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = (
<>
<button className="button">Green</button>
<button className="button button2">Blue</button>
<button className="button button3">Red</button>
<button className="button button4">Gray</button>
<button className="button button5">Black</button>
// 다른 엘레멘트 들과 혼동 될수 있기 때문에
**// button에도 class가 아닌 className 을 준다.(형평성)**
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>共通のボタンはbuttonで刺して、色に新しいレベルを変えただけです。
意味のあるクラス名に変更します.
スタイル属性が追加されました.(行内)
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<style>
.button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
**.blue** {
background-color: #008cba;
}
.**red** {
background-color: #f44336;
}
.**gray** {
background-color: #e7e7e7;
color: black;
}
.**black** {
background-color: #555555;
}
</style>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = (
<>
<button className="button" style={{ borderRadius: "50%" }}>
Green
</button>
<button className="button **blue**" style={{ borderRadius: "8px" }}>
Blue
</button>
<button className="button **red**">Red</button>
<button className="button **gray**">Gray</button>
<button className="button **black**">Black</button>
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>反応の利点を生かす
REACTの利点は、JSとHTMLを混在させて使用するJSXで、その中で関数など様々なものを作成できることです.
関数に変えてみましょう
function Button({ props }) {
return <button {...props} />;
}
うん.
もちろんです.propsが入っているからです.(でアトリビュートを個別に配置)
propsにはすべての属性の情報があります.
<>
<button className="button" **style={{ borderRadius: "50%" }}**>
Green
</button>
<button className="button blue" **style={{ borderRadius: "8px" }}**>
Blue
</button>
<button className="button red">Red</button>
<button className="button gray">Gray</button>
<button className="button black">Black</button>
</>function Button( {className, style, ...rest} ) {
return <button {...props} />;
}適用を試みる。
<script type="text/babel">
const rootElement = document.getElementById("root");
// *** Point 1 ***
function Button({ className, color, style, ...rest }) {
return (
<button
className={`button ${className} ${color}`}
style={{ fontSize: 50, ...style }}
{...rest}
/>
);
}
const element = (
<>
<Button className="button" style={{ borderRadius: "50%" }}>
Green
</Button>
// *** Point 2 ***
<Button
className="color blue"
style={{ **fontSize: 15**, borderRadius: "8px" }}
>
Blue
</Button>
<Button className="color red">Red</Button>
<Button className="color gray">Gray</Button>
<Button className="color black">Black</Button>
</>
);
ReactDOM.render(element, rootElement);
</script> // *** 1 ***
function Button({ className, **color**, style, ...rest }) {
return (
<button
className={`button ${className} ${**color**}`}
style={{ fontSize: 50, ...style }}
{...rest}
/>
);
}* Point 1 *
エルリゲートの属性で、パラメータに入っていなければ...restで処理する
className=button blueに等しい.
別名のclassNameをcolorに変更するにはどうすればいいですか?
const element = (
<>
<Button color="button" style={{ borderRadius: "50%" }}>
Green
</Button>
<Button color="blue" style={{ **fontSize: 15,** borderRadius: "8px" }}>
Blue
</Button>
<Button color="red">Red</Button>
<Button color="gray">Gray</Button>
<Button color="black">Black</Button>
</>
);function Button({ **color**, style, ...rest }) {
return (
<button
className={`button ${**color**}`}
style={{ fontSize: 50, ...style }}
{...rest}
/>
);
}* Point 2 *
// *** 2 ***
<Button
className="color blue"
style={{ **fontSize: 15**, borderRadius: "8px" }} >
Blue
</Button>customが必要な部分は、インラインスタイルを使用できます.
レスポンススタイルの優先度
「行内ラベルのプロパティ」>「パラメータのプロパティ」>「className」
または
style > className
整理する
反応元素に様式を加える
className→文字列(CSSに渡す場合)
スタイル→オブジェクトより先に、Camelキャビネット、className(インラインスタイル)
優先度→style>className
Reference
この問題について(React:Elementにスタイルを追加する), 我々は、より多くの情報をここで見つけました https://velog.io/@coil/React-Element-에-스타일-입히기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol