Fix the input styles when using a Bootstrap (GH-44)

Author: ArtyomVancyan

.npmignore

@@ -0,0 +1,3 @@
+examples
+scripts
+tests

examples/antd5.x/src/Demo.tsx

@@ -34,7 +34,7 @@ const Demo = () => {
 		<ConfigProvider
 			theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
 			<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
-				<div className="m-5" style={{margin: 20, maxWidth: 400}}>
+				<div style={{margin: 20, maxWidth: 400}}>
 					{value && (
 						<pre style={{
 							background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.2.1",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [

src/index.tsx

@@ -16,7 +16,7 @@ const PhoneInput = (inputLegacyProps: PhoneInputProps) => {
 	const dropdownPrefixCls = getPrefixCls("dropdown");
 	const [_1, inputCls] = genComponentStyleHook(inputPrefixCls);
 	const [_2, dropdownCls] = genComponentStyleHook(dropdownPrefixCls);
-	const [theme, token, _3] = useToken();
+	const [theme, token] = useToken();
 
 	const inputClass = useMemo(() => {
 		return `${inputCls} ` + getStatusClassNames(inputPrefixCls, status);

src/legacy/style.ts

@@ -1,4 +1,22 @@
 export default (cssText: string) => {
+	window.addEventListener("load", () => {
+		/** Resolve the overlap issue of the CSS rules when using Bootstrap */
+		for (const styleSheet of Array.from(document.styleSheets)) {
+			try {
+				for (const rule of Array.from(styleSheet.cssRules || styleSheet.rules)) {
+					if (rule instanceof CSSStyleRule) {
+						rule.selectorText = rule.selectorText.replace(
+							/^\.form-control(?=:|$)/,
+							".form-control:not(.ant-input)",
+						)
+					}
+				}
+			} catch (e) {
+			}
+		}
+	})
+
+	/** Inject the given `cssText` in the document head */
 	const style = document.createElement("style");
 	style.setAttribute("type", "text/css");
 

src/style.ts

@@ -1,14 +1,19 @@
-import {GlobalToken} from "antd/lib/theme/interface";
-import {genBasicInputStyle, initInputToken} from "antd/lib/input/style";
+import {mergeToken} from "antd/lib/theme/internal";
+import * as inputHelper from "antd/lib/input/style";
 
-export default (token: GlobalToken) => ({
+export default (token: any) => ({
 	".react-tel-input": {
 		".country-list": {
 			boxShadow: token.boxShadow,
 			backgroundColor: token.colorBgElevated,
 			".country-name": {color: token.colorText},
 			".search": {backgroundColor: token.colorBgElevated},
-			".search-box": genBasicInputStyle(initInputToken(token) as any),
+			".search-box": inputHelper.genBasicInputStyle(
+				mergeToken(
+					((inputHelper as any).initInputToken || (() => ({})))(token),
+					((inputHelper as any).initComponentToken || (() => ({})))(token),
+				)
+			),
 			".country": {
 				borderRadius: token.borderRadiusOuter,
 				".dial-code": {color: token.colorTextDescription},