[React] React CSS 스타일

 

css 스타일

width: ${(props) => (props.width != null ? `${props.width}px !important` : '250px !important')};

 

 

 

 

 

다음처럼 사용하고 싶다면

<CommonSegment textAlign={'center'} width={'350'} marginLeft={'50'}>

 

 

 

 

export const CommonSegment = styled(Segment)<CommonSegmentProps>`
  min-height: ${(props) => (props.minHeight != null ? `${props.minHeight}px !important` : '50px !important')};
  ${(props) =>
    props.marginLeft &&
    css`
      margin-left: ${props.marginLeft}px !important;
    `}
  ${(props) =>
    props.width &&
    css`
      width: ${props.width}px !important;
    `}
    ${(props) =>
    props.textAlign &&
    css`
      textalign: ${props.textAlign} !important;
    `}
`;

 

 

다음처럼 css를 선언해 놓고 사용하면된다.

 

이 곳에서 조건도 줄 수있다.

 

 

interface CommonSegmentProps {
  minHeight?: number;
  width?: number;
  marginLeft?: number;
  textAlign?: string;
}

 

 

Type도 당연히 이런식으로 값에 맞게 잘  주어야 한다.

 

 

 

const options = [
  { key: '1', value: 'all', text: '제목 및 내용' },
  { key: '2', value: 'ui.name', text: '담당자' },
];

 

 

value에 mybatis에 alias와 column name에 같게 작성해주면 잘 작성한다.

 

(여기서 나도 신기했던 것은, mybatis alias를 recognize 한다는 것)

 

 

 

export interface DetailProps {
  ID?: number;
  NAME?: string;
  INSIDE_ORGANIZATION_YN?: string;
  REGIST_USER_NAME?: string;
  REGIST_DATE?: string;
}

 

다음과 같이 타입스크립트에 ? 물음표가 들어가면

 

 

/* 상세보기 */
export const OrganizationDetail = atom<DetailProps>({
  key: 'OrganizationDetail',
  default: {},
});

 

 

저장소에 default가 정상적으로 작동한다.

 

하지만 ?을 제외시키면

 

반드시 default에 

defalut: {

ID: '',

NAME: ''

}

 

이런식으로 넣어주어야 된다.