Type for style attribute passed to function

ReactjsTypescript

Reactjs Problem Overview


Please consider this typescript function

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

What is the correct type for the first argument style? I feel like it should be something like HTMLElementStyle but I can't find the right incantation.

Sorry, I wasn't sufficiently clear. I want to know what type to use to replace the "any" in style: any. The typescript definitions handle checking the types of the supplied members of the object.

I'm talking about definition of the function, not application.

Reactjs Solutions


Solution 1 - Reactjs

The type is React.CSSProperties. You can find this in VSCode by writing <div style={{}}> and pressing F12 when having your cursor in the style attribute.

Solution 2 - Reactjs

The style prop on regular DOM elements should be in the form of an object where the keys are the css attributes.

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

Notice that in the case of attributes containing dashes, they become camel cased. For instance background-color becomes backgroundColor.

React style documentation

Solution 3 - Reactjs

for me work "import CSS from csstype" && wrap to quotes '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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGaryBishopView Question on Stackoverflow
Solution 1 - ReactjsDan HomolaView Answer on Stackoverflow
Solution 2 - ReactjsMattView Answer on Stackoverflow
Solution 3 - Reactjsdazn311View Answer on Stackoverflow