如何限制 css 文件在反应组件库中的作用域？

Question

我使用 Reac 和 Rollup 创建了一个组件 Lib 以用于其他项目，但我在正确设置它的样式方面遇到了一些问题。 我的 package.json

{
  "name": "react-component-lib",
  "version": "0.0.1",
  "description": "A react component library",
  "scripts": {
    "rollup": "rollup -c"
  },
  "author": "test",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-typescript": "^11.0.0",
    "@types/react": "^18.0.28",
    "react": "^18.2.0",
    "rollup": "^3.20.0",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-postcss": "^4.0.2",
    "tslib": "^2.5.0",
    "typescript": "^5.0.2"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts"
}

还有我的 rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from './package.json' assert { type: 'json'};
import postcss from 'rollup-plugin-postcss';

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            postcss()
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        plugins: [dts()],
        external: [/\.css$/],
    },
];

事情是，像这样使用，我创建了一个 Button.tsx 组件，如：

import React from "react";
import "./Button.css";

interface ButtonProps {
  label: string;
}

const Button = (props: ButtonProps) => {
  return <button>{props.label} teste to npm</button>;
};

export default Button;

和样式 Button.css

button{
    background: none;
    color: #d8e2dc;
    border: 2px solid;
    padding: 1em 2em;
    font-size: 1em;
    border-color: #d8e2dc;
    transition: all 0.5s;
}

button:hover{
    border-color: #fec89a;
    color: #fec89a;
    box-shadow: 0  0.5em 0.5em -0.4em;
    transform: translateY(-0.25em);
}

但这最终会修改我使用的所有项目中的所有按钮。 将样式保持在该特定按钮而不是所有按钮范围内的最佳解决方案是什么？

我尝试将自定义类添加到 Button.tsx 文件，但如果有人向其中添加自定义类名，最终会导致一些冲突。 我还尝试为它安装样式化的组件，这样样式就会被限制在一个特定的元素上，但我在使用它时遇到了一些麻烦。