IT이야기

기능에 전달된 스타일 속성 유형

cyworld 2022. 3. 14. 21:23
반응형

기능에 전달된 스타일 속성 유형

이 형식 지정 함수를 고려하십시오.

 function button(style: any, func: ()=>void, img: string) {
    return (
      <button
        className="Reader_Button"
        style={style}
        onClick={func}
      >
        <img src={img} alt="" />
        Back
      </button>
    );
  }

첫 번째 인수의 올바른 유형은?style나는 그것이 HTMLlementStyle과 같은 것이 되어야 한다고 생각하지만 올바른 어조를 찾을 수 없다.

미안, 내가 충분히 명확하지 않았어.의 "any"를 대체하기 위해 어떤 유형을 사용해야 하는지 알고 싶다.style: any. typecript 정의는 제공된 오브젝트 구성원의 유형 확인을 처리한다.

응용이 아니라 함수의 정의에 대해 말하는 겁니다.

종류는React.CSSProperties이것을 VSCode에서 찾을 수 있다.<div style={{}}>그리고 커서 위치에 있을 때 누름style기여하다

일반 DOM 요소에 대한 스타일 받침대는 키가 css 속성인 객체의 형태여야 한다.

예:<div style={{ width: "100%", backgroundColor: "black" }} />

대시를 포함한 속성의 경우 낙타에 갇히게 된다.예를 들어.background-color된다backgroundColor.

반응 스타일 설명서

"CSstype에서 CSS 가져오기" &&sh랩에서 'maxHeight'를 인용하는 작업: '120px'

import React from 'react';
import CSS from 'csstype';
    
const shortList = () => {
    const listStylus: CSS.Properties = {
        'maxHeight': '120px',
        'overflow': 'hidden',
      }
    
      return (
        <div>
          <ul style={listStylus} >
            <li>Item element 1</li>
            <li>Item element 2</li>
          </ul>
        </div>
      )
}

export default shortList

참조URL: https://stackoverflow.com/questions/45019775/type-for-style-attribute-passed-to-function

반응형