Skip to main content

内联样式

方法一​

import React from "react";
 
export default function App() {
  return (
      <h1 style={{ textAlign: "center" }}>Hello World</h1>
  );
}

方法二​

import React from "react";
 
const pStyle = {
  fontSize: '16px',
  color: 'blue'
}
 
export default function App() {
  return (
      <p style={pStyle}>The weather is sunny with a small chance of rain today.</p>
  );

传播运算符：将段落样式进一步扩展​

import React from "react";
const pStyle = {
  fontSize: "16px",
  color: "blue"
};
export default function App() {
  return (
    <>
      <p style={pStyle}>
        The weather is sunny with a small chance of rain today.
      </p>
      <p style={{ ...pStyle, color: "green", textAlign: "right" }}>
        When you go to work, don't forget to bring your umbrella with you!
      </p>
    </>
  );
}

链接​

react内联样式+ 3种其他CSS样式化方法 React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解