How to limit a css file to scope in a react component library?

Question

I created a component Lib to use in other projects with Reac and Rollup and I'm facing some issues to properly style it. My 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"
}

And my 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$/],
    },
];

The thing is, using like this, I create a Button.tsx component like:

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;

and the style 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);
}

But this end up modifying all buttons in all projects that I use. What would be the best solution to keep the styling to the scope of this specific button and not all the buttons?

I tried adding a custom class to the Button.tsx file but it would end causing some conflicts if the person added a custom className to it. I also tried installing styled components to it so the styling would be limited to a specific element but I had some troubles with the use of it.