如何使用react编辑元素宽度

/* 在你的样式文件中 */
.my-element {
  width: 200px; /* 或者使用百分比，如 width: 50%; */
}

import React from 'react';
import './MyComponent.css';

function MyComponent() {
  return <div className="my-element">这是一个元素</div>;
}

export default MyComponent;

import React from 'react';

function MyComponent() {
  return <div style={{ width: '200px' }}>这是一个元素</div>;
}

export default MyComponent;

import React, { useState } from 'react';

function MyComponent() {
  const [width, setWidth] = useState('200px');

  const handleChangeWidth = () => {
    setWidth(width === '200px' ? '300px' : '200px');
  };

  return (
    <div>
      <div style={{ width: width }}>这是一个元素</div>
      <button onClick={handleChangeWidth}>改变宽度</button>
    </div>
  );
}

export default MyComponent;

import React from 'react';

function MyComponent({ width }) {
  return <div style={{ width: width }}>这是一个元素</div>;
}

export default MyComponent;

import React from 'react';
import MyComponent from './MyComponent';

function ParentComponent() {
  return <MyComponent width="200px" />;
}

export default ParentComponent;