Files
react-test/docs/data/system/sizing/Values.tsx
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

95 lines
2.2 KiB
TypeScript

import Box from '@mui/material/Box';
export default function Values() {
return (
<Box sx={{ width: '100%' }}>
<Box
sx={(theme) => ({
width: 1 / 4,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
textAlign: 'center',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Width 1/4
</Box>
<Box
sx={(theme) => ({
width: 300,
p: 1,
my: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
textAlign: 'center',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Width 300
</Box>
<Box
sx={(theme) => ({
width: '75%',
p: 1,
my: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
textAlign: 'center',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Width 75%
</Box>
<Box
sx={(theme) => ({
width: 1,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
textAlign: 'center',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Width 1
</Box>
</Box>
);
}