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({
children
}) {
const options = {key: 'mui'}
const options = { key: 'mui' }
const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
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'
function SignInPage() {
@@ -7,6 +8,12 @@ function SignInPage() {
<div className='flex flex-col justify-center gap-[24px] mt-[48px] items-center'>
<p className='text-[#616161] text-[14px] font-normal'>شماره همراه خود را وارد نمایید.</p>
</div>
<div className='mt-[24px] mb-[32px]'>
<Field
type='number'
title='شماره همراه'
/>
</div>
</div>
)
}
+36 -71
View File
@@ -11,8 +11,7 @@
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.17",
"@mui/material-nextjs": "^5.15.11",
"@mui/material": "^5.14.17",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
"aos": "^2.3.4",
"next": "14.2.3",
@@ -248,9 +247,9 @@
"integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
},
"node_modules/@floating-ui/core": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
"integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
"integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
"dependencies": {
"@floating-ui/utils": "^0.2.0"
}
@@ -265,9 +264,9 @@
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
"integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
"integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
@@ -347,16 +346,16 @@
}
},
"node_modules/@mui/base": {
"version": "5.0.0-beta.40",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
"integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
"version": "5.0.0-beta.23",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.23.tgz",
"integrity": "sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@floating-ui/react-dom": "^2.0.8",
"@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14",
"@babel/runtime": "^7.23.2",
"@floating-ui/react-dom": "^2.0.2",
"@mui/types": "^7.2.8",
"@mui/utils": "^5.14.17",
"@popperjs/core": "^2.11.8",
"clsx": "^2.1.0",
"clsx": "^2.0.0",
"prop-types": "^15.8.1"
},
"engines": {
@@ -364,7 +363,7 @@
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
@@ -387,19 +386,19 @@
}
},
"node_modules/@mui/material": {
"version": "5.15.17",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.17.tgz",
"integrity": "sha512-ru/MLvTkCh0AZXmqwIpqGTOoVBS/sX48zArXq/DvktxXZx4fskiRA2PEc7Rk5ZlFiZhKh4moL4an+l8zZwq49Q==",
"version": "5.14.17",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.17.tgz",
"integrity": "sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/base": "5.0.0-beta.40",
"@mui/core-downloads-tracker": "^5.15.17",
"@mui/system": "^5.15.15",
"@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14",
"@types/react-transition-group": "^4.4.10",
"clsx": "^2.1.0",
"csstype": "^3.1.3",
"@babel/runtime": "^7.23.2",
"@mui/base": "5.0.0-beta.23",
"@mui/core-downloads-tracker": "^5.14.17",
"@mui/system": "^5.14.17",
"@mui/types": "^7.2.8",
"@mui/utils": "^5.14.17",
"@types/react-transition-group": "^4.4.8",
"clsx": "^2.0.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1",
"react-is": "^18.2.0",
"react-transition-group": "^4.4.5"
@@ -409,7 +408,7 @@
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@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": {
"version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
"integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
"version": "5.15.20",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
"integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/utils": "^5.15.14",
"@mui/utils": "^5.15.20",
"prop-types": "^15.8.1"
},
"engines": {
@@ -595,9 +560,9 @@
}
},
"node_modules/@mui/utils": {
"version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
"integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
"version": "5.15.20",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
"integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@types/prop-types": "^15.7.11",
+1 -2
View File
@@ -12,8 +12,7 @@
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.17",
"@mui/material-nextjs": "^5.15.11",
"@mui/material": "^5.14.17",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
"aos": "^2.3.4",
"next": "14.2.3",