如何在react渲染中使用calc css函数

import React from 'react';

const MyComponent = () => {
  const style = {
    width: 'calc(100% - 50px)',
    height: 'calc(100vh - 100px)',
    backgroundColor: 'lightblue'
  };

  return (
    <div style={style}>
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;

.my-div {
  width: calc(100% - 50px);
  height: calc(100vh - 100px);
  background-color: lightblue;
}

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

const MyComponent = () => {
  return (
    <div className="my-div">
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  const containerWidth = 100; // Example value, you can calculate this dynamically
  const containerHeight = 200; // Example value, you can calculate this dynamically

  const style = {
    width: `calc(100% - ${containerWidth}px)`,
    height: `calc(100vh - ${containerHeight}px)`,
    backgroundColor: 'lightblue'
  };

  return (
    <div style={style}>
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;