0%

813_React官方文档_样式添加

import React from 'react';
import './App.css';
function MyButton() {
  return <button>点我</button>;
}
const user = {
  name: 'lzk',
  color: 'pink',
  imgUrl:
    'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641',
};

export default function App() {
  return (
    <>
      <h1 className="h1Color">Hello</h1>
      {/* 行内样式的编写方法 style={ } JSX 大括号内的一个普通 {} 对象*/}
      <h1 style={{ color: user.color, fontSize: 36 }}>欢迎来到React的世界</h1>
      {/* 嵌套组件 */}
      <MyButton />
      {/* src也可以读取变量 */}
      <img src={user.imgUrl} className="pic" alt="" />
    </>
  );
}