A collection of legitimate TypeScript CSS property names, but with hyphens included

I'm working on a component where I need to store an array of valid CSS properties, but the issue is that the properties are stored in camel case format in the CSSStyleDeclaration object. I require the properties in their original hyphenated form, like 'background-color' instead of 'backgroundColor'. Although I am aware of the React.CSSProperties type, it also uses camel-cased properties while allowing for unitless numeric values.

Is there a TypeScript type available to use the original hyphenated CSS property names?

cssreactjstypescript

Answer №1

If you're using MUI, emotion, or other popular component libraries, chances are you're already familiar with the csstype library.

This library enables you to make use of the unique hyphen props in your components.

import CSS from "csstype";

interface MyComponentProps {
  cssProperties: (keyof CSS.PropertiesHyphen)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
  //
}

<MyComponent cssProperties={["color", "background-color"]} />;

Answer №2

Try using the Kebab type found here. Any CSS properties written in camel case will automatically be converted into kebab case.

type Kebab<T extends string, A extends string = ""> =
    T extends `${infer F}${infer R}` ?
    Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> :
    A

type Props = {
    cssProps: Kebab<keyof React.CSSProperties>[];
}

const Component = (props: Props) => null;

const App = () => (
  <Component cssProps={['min-width']} />
);

Check it out on the Typescript Playground

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

htmlcssscroll

What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next ...

htmlcsshoveruinavigationbarnav

Tips for retrieving the most recent number dynamically in a separate component without needing to refresh the page

Utilizing both the Helloworld and New components, we aim to store a value in localStorage using the former and display it using the latter. Despite attempts to retrieve this data via computed properties, the need for manual refreshing persists. To explore ...

javascripttypescriptvue.jslocal-storagevuejs3

Having difficulty extracting information from a React.js data grid

My goal is to extract the stock price data from the NYSE website for a specific company, such as IBM. I am specifically interested in retrieving the value under the Last Price field within the Quote data grid. Based on my observation, this grid seems to be ...

pythonseleniumreactjs

Substitute Customized Interface Type Identifier

I am working on creating a versatile function interface for functor map while respecting the provided interface. In the code snippet below, my goal is to ensure that the value of mb is of type Maybe<number>, rather than the actual type Functor<num ...

typescripttypescript-generics

What are the steps to keep Discord bot buttons active even after a restart?

I recently embarked on creating my own discord bot. I successfully implemented a command with buttons, but encountered an issue with making the button functionality persist after a restart. Every time I restart, the buttons display an "interaction failed ...

typescript

Display a loading image during the execution of the Exec_Shell Script

Looking to add a loading image while script.sh is executing Check out the code snippet below: <?php if (isset($_POST['restartserver'])) { shell_exec("my-script.sh"); } ?> <html> <body> &l ...

phpjqueryhtmlcssajax

Execute webpack without using the sudo command

Having an issue with my React application - when trying to create the bundle using the webpack command, I keep encountering an access error: emittingError: EACCES: permission denied If I run the command with sudo it works fine. Is there a way to avoid us ...

reactjsnpmwebpacksudo

Unable to successfully redirect to the homepage following a login with the <Redirect> feature

I am trying to implement a Redirect from react-router-dom version 4.3.1. I have all the logic in my app.js file where I make a request for the token, and if it exists, I need to redirect the user to the homepage. I also attempted to use history, but it doe ...

reactjsreact-router-dom

Top tips for customizing CSS styles for select control options in Chrome

I have a select box that contains various options, and I am looking to apply unique styles specifically to each option within the select control. The styles I would like to implement include: color: #333333; font-size: 14px; min-height: 2em; padding: 0px ...

htmlcss

"Utilizing the same generic in two interface properties in Typescript necessitates the use of the

I have created an interface as follows: interface I<T>{ foo: T arr: T[] } After defining the interface, I have implemented an identity function using it: const fn = <T>({foo, arr}: I<T>) => ({foo, arr}) When calling this function l ...

typescripttypescript-generics

Using JavaScript to save a file with a data URL in Internet Explorer

Need help with file conversion on different browsers. I developed an app that converts files, and everything was working perfectly in Chrome. However, when it comes to IE (10/11/Edge), I'm facing some challenges: 1) The HTML5 download attribute does ...

javascriptreactjsinternet-explorer

What could be causing the incorrect display of the date sum in React?

I have this particular component that retrieves the current date, adds one year to it, and is supposed to display the result. However, it seems to be displaying a strange number. import React from 'react' class Calendar extends React.Compon ...

reactjs

End all sessions on msal-react tabs when utilizing localStorage

I'm currently working on a React 18.x with NextJS 12.x application that utilizes msal-react version 1.4.4, which is dependent on msal-browser version 2.28.0 for authentication and Azure B2C. Here's a glimpse of my configuration: export const msal ...

reactjsnext.jsazure-ad-b2cazure-ad-msalmsal-react

Angular 8: Adjusting select options based on another field's value

Currently attempting to modify the value within a select element in Angular 8. Upon researching, I discovered that I could potentially utilize the following: $('#selectSeccion').val("SeccionOption"); The particular select element is as follows: ...

javascriptjqueryhtmlangulartypescript

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

csssveltesveltekitcarbon-componentscarbon-components-svelte

The background image fails to load in ReactJS application

Usually, I have no trouble finding solutions to my problems, but this time I'm really stuck - and I apologize in advance if my question seems silly or trivial. I am currently working on a simple React app where I need to set a background image for th ...

javascripthtmlcssreactjswebpack

What is the process for calculating a class property in typescript?

If I were writing this in JavaScript, it would look like: function a(b,c) {this.foo = b; this.bar = c; this.yep = b+c} // undefined b = new a(1,2) // a {foo: 1, bar: 2, yep: 3} However, I've been struggling to achieve the same in TypeScript. None of ...

angularjsangulartypescript

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

css

Ways of utilizing a dynamic key for invoking a resource from prisma

Currently, I am attempting to implement a more general method to retrieve data from Prisma. The function in question appears as follows: import { Prisma, PrismaClient } from '@prisma/client'; import { NextApiRequest, NextApiResponse } from ' ...

typescriptnext.jsprisma