Depend

example/src/App.tsx

@@ -5,7 +5,7 @@ import ReactButton from 'react-button-test-package'
 function App() {
   return (
     <div>
-      <ReactButton text='111' onClick={() => console.log(111)} />
+      <ReactButton text='111' classString='hello' onClick={() => console.log(111)} />
     </div>
   )
 }

package.json

@@ -42,6 +42,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.15",
@@ -86,5 +87,8 @@
     "style-loader": "^2.0.0",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6"
   }
 }

src/Button.tsx

@@ -1,14 +1,19 @@
 import './_style.scss';
 import * as React from 'react';
+import classNames from 'classnames';
 
 export interface Props {
   text: string;
+  classString?: string;
   onClick: (e: any) => void;
 }
 
-const Button = ({ text, onClick }: Props) => {
+const Button = ({ text, classString, onClick }: Props) => {
   return (
-    <button className='btn' onClick={(e: any) => onClick(e)}>
+    <button
+      className={classNames('btn', `${classString}`)}
+      onClick={(e: any) => onClick(e)}
+    >
       {text}
     </button>
   );