reactjs - Cara mendefinisikan variabel css dalam atribut style di React dan TypeScript

Saya ingin mendefinisikan jsx seperti ini:

<table style={{'--length': array.length}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

dan saya menggunakan --length di CSS, saya juga memiliki sel yang memiliki --count yang menunjukkan jumlah menggunakan pseudo selector CSS (menggunakan trik counter).

tetapi typescript mengeluarkan kesalahan:

TS2326: Types of property 'style' are incompatible.
  Type '{ '--length': number; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and ''--length'' does not exist in type 'CSSProperties'.

apakah mungkin mengubah tipe atribut style untuk menerima variabel CSS (properti kustom) atau adakah cara untuk memaksa apapun pada objek style?

Jawaban #1

Seperti ini:

function Component() {
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}

Atau tanpa variabel style tambahan:

function Component() {
  return <div style={{ "--my-css-var": 10 } as React.CSSProperties} />
}

Jawaban #2

Anda dapat dengan mudah menempatkan penggabungan deklarasi modul ini menggunakan template string di bagian atas file atau di file .d.ts mana pun, kemudian Anda akan dapat menggunakan variabel CSS apa pun selama itu diawali dengan '--' dan berupa string atau angka

import 'react';

declare module 'react' {
    interface CSSProperties {
        [key: `--${string}`]: string | number
    }
}

misalnya

<div style={{ "--value": percentage }} />

Jawaban #3

Menge-cast style ke any akan menghilangkan seluruh tujuan penggunaan TypeScript, jadi saya menyarankan untuk memperluas React.CSSProperties dengan sekumpulan properti kustom Anda:

import React, {CSSProperties} from 'react';

export interface MyCustomCSS extends CSSProperties {
  '--length': number;
}

Dengan memperluas React.CSSProperties, Anda akan menjaga pemeriksaan properti TypeScript tetap berjalan dan Anda akan diperbolehkan menggunakan properti kustom --length Anda.

Menggunakan MyCustomCSS akan terlihat seperti ini:

const MyComponent: React.FC = (): JSX.Element => {
  return (
    <input
      style={
        {
          '--length': 300,
        } as MyCustomCSS
      }
    />
  );
};

Jawaban #4

Jika Anda pergi ke definisi CSSProperties, Anda akan melihat:

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

Halaman itu memberikan contoh bagaimana cara menyelesaikan kesalahan tipe dengan menambahkan definisi Properties di csstype atau dengan mengubah nama properti menjadi any.

Jawaban #5

Anda dapat menambahkan assertion tipe ke variabel. yaitu {['--css-variable' as any]: value }

<table style={{['--length' as any]: array.length}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

Jawaban #6

coba :

<table style={{['--length' as string]: array.lenght}}>
  ...
</table>

Artikel terkait