forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
UnstyledInputIntroduction.tsx
62 lines (55 loc) · 1.5 KB
/
UnstyledInputIntroduction.tsx
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
60
61
62
import * as React from 'react';
import InputUnstyled from '@mui/base/InputUnstyled';
import { styled } from '@mui/system';
const blue = {
100: '#DAECFF',
200: '#b6daff',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
};
const grey = {
50: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};
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 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
&: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: React.InputHTMLAttributes<HTMLInputElement>,
ref: React.ForwardedRef<HTMLDivElement>,
) {
return (
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
);
});
export default function UnstyledInputIntroduction() {
return <CustomInput aria-label="Demo input" placeholder="Type something…" />;
}