/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/buttons/CustomizedButtons.js
59 строк
1 KB
Brijesh Bittu
[code-infra] Remove React import requirement for jsx (#47146)
29 окт 2025, 20:55
Не верифицирован
29 окт 2025, 20:55
6c9e82f
Код
Авторство
О чём код?
import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; import { purple } from '@mui/material/colors'; const BootstrapButton = styled(Button)({ boxShadow: 'none', textTransform: 'none', fontSize: 16, padding: '6px 12px', border: '1px solid', lineHeight: 1.5, backgroundColor: '#0063cc', borderColor: '#0063cc', fontFamily: [ '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ].join(','), '&:hover': { backgroundColor: '#0069d9', borderColor: '#0062cc', boxShadow: 'none', }, '&:active': { boxShadow: 'none', backgroundColor: '#0062cc', borderColor: '#005cbf', }, '&:focus': { boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', }, }); const ColorButton = styled(Button)(({ theme }) => ({ color: theme.palette.getContrastText(purple[500]), backgroundColor: purple[500], '&:hover': { backgroundColor: purple[700], }, })); export default function CustomizedButtons() { return ( <Stack spacing={2} direction="row"> <ColorButton variant="contained">Custom CSS</ColorButton> <BootstrapButton variant="contained" disableRipple> Bootstrap </BootstrapButton> </Stack> ); }