forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
UnstyledInputBasic.js
59 lines (52 loc) · 1.41 KB
/
UnstyledInputBasic.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import * as React from 'react';
import InputUnstyled from '@mui/base/InputUnstyled';
import { styled } from '@mui/system';
const blue = {
100: '#DAECFF',
200: '#80BFFF',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
};
const grey = {
50: '#F3F6F9',
100: '#E7EBF0',
200: '#E0E3E7',
300: '#CDD2D7',
400: '#B2BAC2',
500: '#A0AAB4',
600: '#6F7E8C',
700: '#3E5060',
800: '#2D3843',
900: '#1A2027',
};
const StyledInputElement = styled('input')(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
padding: 12px;
border-radius: 12px;
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
&:hover {
border-color: ${blue[400]};
}
&:focus {
border-color: ${blue[400]};
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
`,
);
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
return (
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
);
});
export default function UnstyledInputBasic() {
return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
}