[React<30] 초보자 강좌 04초 유연한 배치>

웹 응용 프로그램을 만들 때 처음에 예상 화면 크기(해당 장치)를 결정할 수 있다고 생각합니다.
화면 너비이점도 있지만 최근 PC에서는 부드러운 레이아웃이 유행하고 있다.

이른바 부드러운 구조

2021/12/5시에 보면 웹 페이지 정보 빠를 거예요.
다음 두 점은 피쳐입니다.

기본적으로 내용의 폭도 화면의 폭과 일치한다

최소 너비와 최대 폭

화면을 굴리지 않도록 태블릿용, 스마트폰용으로도 전환할 수 있다.

이루어지다

이 헤더만 있는 샘플에 적용됩니다.

https://github.com/kosukekashiwa/cra-sample
width에 100% 또는 100vw를 설정하는 동시에 min-width와 max-width만 설정한다.min-width와 max-width는 theme.ts로 정의되었다.
theme.ts

import { createTheme } from '@mui/material/styles';
import { blueGrey, blue, deepOrange } from '@mui/material/colors';

{/* 最小幅と最大幅を定義 */}
export const FLEXIBLE_MIN_WIDTH = 1000;
export const FLEXIBLE_MAX_WIDTH = 1200;

const theme = createTheme({
  ...

MainContainer.tsx

const MainContainer: React.VFC<MainContainerProps> = (props) => {
  return (
    <Box flexGrow={1} sx={{ overflowY: 'auto' }}>
      <Box
        {/* widthは100vw(または100%) */}
        {/* minWidth, maxWidthを設定 */}
        width="100vw"
        minWidth={`${FLEXIBLE_MIN_WIDTH}px`}
        maxWidth={`${FLEXIBLE_MAX_WIDTH}px`}
        margin="auto"
        px="32px"
        py="16px"
      >
        {props.children}
      </Box>
    </Box>
  );
};

AppHeader.tsx

const StyledAppbar = styled(AppBar)({
  backgroundColor: blue[900],
});

const StyledToolbar = styled(Toolbar)({
  {/* widthは100vw(または100%) */}
  {/* minWidth, maxWidthを設定 */}
  width: '100vw',
  minWidth: `${FLEXIBLE_MIN_WIDTH}px`,
  maxWidth: `${FLEXIBLE_MAX_WIDTH}px`,
  margin: 'auto',
});

export type AppHeaderProps = {
  appTitle: string;
  userName: string;
  leftItems: { id: number; node: React.ReactNode }[];
};

const AppHeader: React.VFC<AppHeaderProps> = (props) => {
  return (
    <StyledAppbar position="static">
      <StyledToolbar>
        <AppTitleLabel label={props.appTitle} />

끝.

계속하다

https://zenn.dev/kosukek/articles/ebb014d0ecae9e

이전

https://zenn.dev/kosukek/articles/97f2fbc6269af3