React 中對局部組件生效的 CSS 可以通過以下方式實現(xiàn)：

1、使用局部樣式：在組件內部定義樣式，僅對該組件生效。

import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ style }) => (
  <div style={style}>
    Hello, World!
  </div>
);
MyComponent.propTypes = {
  style: PropTypes.object, // 允許傳入樣式對象
};
// 使用時傳入樣式對象
<MyComponent style={{ color: 'red', fontSize: '16px' }} />;

2、使用類名：在組件內部定義類名，并在樣式表中引用。

在組件中定義類名：

import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ className }) => (
  <div className={className}>
    Hello, World!
  </div>
);
MyComponent.propTypes = {
  className: PropTypes.string, // 允許傳入類名字符串
};

在樣式表中引用類名：

.my-component-style {
  color: red;
  font-size: 16px;
}

使用時傳入類名：

<MyComponent className="my-component-style" />;

3、使用內聯(lián)樣式：直接在組件中定義樣式，

在組件中定義樣式：

import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ style }) => (
  <div style={{ color: 'red', fontSize: '16px' }}>
    Hello, World!
  </div>
);

這種方式會將樣式直接應用到組件上，但需要注意樣式的優(yōu)先級和覆蓋關系。