fix bug field text mui

This commit is contained in:
Ehsan
2024-06-24 03:10:07 +03:30
parent 9e1704e045
commit a5b4179135
5 changed files with 93 additions and 74 deletions
+1 -1
View File
@@ -11,7 +11,7 @@ import theme from '../theme/theme';
export default function ThemeRegistry({ export default function ThemeRegistry({
children children
}) { }) {
const options = {key: 'mui'} const options = { key: 'mui' }
const [{ cache, flush }] = React.useState(() => { const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options); const cache = createCache(options);
cache.compat = true; cache.compat = true;
+48
View File
@@ -0,0 +1,48 @@
import { TextField } from "@mui/material"
function Field({ title, type, isPlaceHolder }) {
return (
<TextField
label={title}
type={type || 'text'}
className="!w-full !mx-auto !bg-[#FFF]"
sx={{
'& .mui-fxnuf-MuiFormLabel-root-MuiInputLabel-root': {
right: '30px'
},
'& .mui-18r6uqa-MuiFormLabel-root-MuiInputLabel-root': {
right: '0',
left: 'auto',
background: '#FFF',
padding: '0 10px'
},
'& .mui-14lo706': {
display: 'none'
},
'& .MuiFormLabel-root': {
top: '-4px !important'
},
// Hide Icon Number
'& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
display: 'none'
},
'& input[type=number]': {
MozAppearance: 'textfield'
},
'& .MuiInputBase-input': { padding: '12.5px 14px' },
'& .MuiInputBase-root': { borderRadius: '6px !important' },
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
".Mui-focused": {
'& .MuiOutlinedInput-notchedOutline': {
border: '1px solid #0FA1B3 !important',
transition: '0.5s all'
}
}
}}
/>
)
}
export default Field
+7
View File
@@ -1,3 +1,4 @@
import Field from '@/app/component/element/Field'
import React from 'react' import React from 'react'
function SignInPage() { function SignInPage() {
@@ -7,6 +8,12 @@ function SignInPage() {
<div className='flex flex-col justify-center gap-[24px] mt-[48px] items-center'> <div className='flex flex-col justify-center gap-[24px] mt-[48px] items-center'>
<p className='text-[#616161] text-[14px] font-normal'>شماره همراه خود را وارد نمایید.</p> <p className='text-[#616161] text-[14px] font-normal'>شماره همراه خود را وارد نمایید.</p>
</div> </div>
<div className='mt-[24px] mb-[32px]'>
<Field
type='number'
title='شماره همراه'
/>
</div>
</div> </div>
) )
} }
+36 -71
View File
@@ -11,8 +11,7 @@
"@emotion/cache": "^11.11.0", "@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.17", "@mui/material": "^5.14.17",
"@mui/material-nextjs": "^5.15.11",
"@mui/styled-engine-sc": "^6.0.0-alpha.18", "@mui/styled-engine-sc": "^6.0.0-alpha.18",
"aos": "^2.3.4", "aos": "^2.3.4",
"next": "14.2.3", "next": "14.2.3",
@@ -248,9 +247,9 @@
"integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
}, },
"node_modules/@floating-ui/core": { "node_modules/@floating-ui/core": {
"version": "1.6.1", "version": "1.6.2",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
"integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
"dependencies": { "dependencies": {
"@floating-ui/utils": "^0.2.0" "@floating-ui/utils": "^0.2.0"
} }
@@ -265,9 +264,9 @@
} }
}, },
"node_modules/@floating-ui/react-dom": { "node_modules/@floating-ui/react-dom": {
"version": "2.0.9", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
"integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
"dependencies": { "dependencies": {
"@floating-ui/dom": "^1.0.0" "@floating-ui/dom": "^1.0.0"
}, },
@@ -347,16 +346,16 @@
} }
}, },
"node_modules/@mui/base": { "node_modules/@mui/base": {
"version": "5.0.0-beta.40", "version": "5.0.0-beta.23",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.23.tgz",
"integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", "integrity": "sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.23.2",
"@floating-ui/react-dom": "^2.0.8", "@floating-ui/react-dom": "^2.0.2",
"@mui/types": "^7.2.14", "@mui/types": "^7.2.8",
"@mui/utils": "^5.15.14", "@mui/utils": "^5.14.17",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"clsx": "^2.1.0", "clsx": "^2.0.0",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
}, },
"engines": { "engines": {
@@ -364,7 +363,7 @@
}, },
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/mui-org" "url": "https://opencollective.com/mui"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0", "@types/react": "^17.0.0 || ^18.0.0",
@@ -387,19 +386,19 @@
} }
}, },
"node_modules/@mui/material": { "node_modules/@mui/material": {
"version": "5.15.17", "version": "5.14.17",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.17.tgz",
"integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==", "integrity": "sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.23.2",
"@mui/base": "5.0.0-beta.40", "@mui/base": "5.0.0-beta.23",
"@mui/core-downloads-tracker": "^5.15.17", "@mui/core-downloads-tracker": "^5.14.17",
"@mui/system": "^5.15.15", "@mui/system": "^5.14.17",
"@mui/types": "^7.2.14", "@mui/types": "^7.2.8",
"@mui/utils": "^5.15.14", "@mui/utils": "^5.14.17",
"@types/react-transition-group": "^4.4.10", "@types/react-transition-group": "^4.4.8",
"clsx": "^2.1.0", "clsx": "^2.0.0",
"csstype": "^3.1.3", "csstype": "^3.1.2",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-is": "^18.2.0", "react-is": "^18.2.0",
"react-transition-group": "^4.4.5" "react-transition-group": "^4.4.5"
@@ -409,7 +408,7 @@
}, },
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/mui-org" "url": "https://opencollective.com/mui"
}, },
"peerDependencies": { "peerDependencies": {
"@emotion/react": "^11.5.0", "@emotion/react": "^11.5.0",
@@ -430,47 +429,13 @@
} }
} }
}, },
"node_modules/@mui/material-nextjs": {
"version": "5.15.11",
"resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.15.11.tgz",
"integrity": "sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==",
"dependencies": {
"@babel/runtime": "^7.23.9"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/server": "^11.11.0",
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0",
"next": "^13.0.0 || ^14.0.0",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/cache": {
"optional": true
},
"@emotion/server": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/private-theming": { "node_modules/@mui/private-theming": {
"version": "5.15.14", "version": "5.15.20",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
"integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.23.9",
"@mui/utils": "^5.15.14", "@mui/utils": "^5.15.20",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
}, },
"engines": { "engines": {
@@ -595,9 +560,9 @@
} }
}, },
"node_modules/@mui/utils": { "node_modules/@mui/utils": {
"version": "5.15.14", "version": "5.15.20",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
"integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.23.9",
"@types/prop-types": "^15.7.11", "@types/prop-types": "^15.7.11",
+1 -2
View File
@@ -12,8 +12,7 @@
"@emotion/cache": "^11.11.0", "@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.17", "@mui/material": "^5.14.17",
"@mui/material-nextjs": "^5.15.11",
"@mui/styled-engine-sc": "^6.0.0-alpha.18", "@mui/styled-engine-sc": "^6.0.0-alpha.18",
"aos": "^2.3.4", "aos": "^2.3.4",
"next": "14.2.3", "next": "14.2.3",