improve class type safety

Author: ddecrulle

src/Display/Display.tsx

@@ -42,7 +42,7 @@ export function Display() {
 
     return (
         <modal.Component title={t("display settings")} size="small">
-            <div /*id="fr-display"*/ className="fr-display">
+            <div /*id="fr-display"*/ className={"fr-display"}>
                 <div className={fr.cx("fr-form-group" as any)}>
                     <fieldset className={fr.cx("fr-fieldset")}>
                         <legend
@@ -63,7 +63,10 @@ export function Display() {
                                         id={getInputId(theme)}
                                         name="fr-radios-theme"
                                     />
-                                    <label className="fr-label" htmlFor={getInputId(theme)}>
+                                    <label
+                                        className={fr.cx("fr-label")}
+                                        htmlFor={getInputId(theme)}
+                                    >
                                         {t(`${theme} theme`)}
                                         {theme === "system" && (
                                             <span className={fr.cx("fr-hint-text")}>

src/Download.tsx

@@ -54,7 +54,7 @@ export const Download = memo(
                         className={cx(fr.cx("fr-download__link"), classes.link)}
                     >
                         {label}
-                        <span className="fr-download__detail">{details}</span>
+                        <span className={fr.cx("fr-download__detail")}>{details}</span>
                     </Link>
                 </p>
             </div>

src/Input.tsx

@@ -152,7 +152,9 @@ export const Input = memo(
                         {...(nativeLabelProps as {})}
                     >
                         {label}
-                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                        {hintText !== undefined && (
+                            <span className={fr.cx("fr-hint-text")}>{hintText}</span>
+                        )}
                     </label>
                 )}
                 {(() => {

src/blocks/PasswordInput.tsx

@@ -142,7 +142,9 @@ export const PasswordInput = memo(
                         htmlFor={inputId}
                     >
                         {label}
-                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                        {hintText !== undefined && (
+                            <span className={fr.cx("fr-hint-text")}>{hintText}</span>
+                        )}
                     </label>
                 )}
                 <div className={fr.cx("fr-input-wrap")} ref={setInputWrapperElement}>

src/consentManagement/ConsentBannerAndConsentManagement/ConsentManagement.tsx

@@ -320,7 +320,7 @@ export function createConsentManagement<
                                     };
                                 })()}
                             />
-                            <label className="fr-label" htmlFor={acceptInputId}>
+                            <label className={fr.cx("fr-label")} htmlFor={acceptInputId}>
                                 {t("accept")}
                             </label>
                         </div>
@@ -421,8 +421,8 @@ export function createConsentManagement<
             <div className={fr.cx("fr-consent-service")}>
                 <fieldset className={fr.cx("fr-fieldset", "fr-fieldset--inline")}>
                     <legend className={fr.cx("fr-consent-service__title")}>{title}</legend>
-                    <div className="fr-consent-service__radios fr-fieldset--inline">
-                        <div className="fr-radio-group">
+                    <div className={fr.cx("fr-consent-service__radios", "fr-fieldset--inline")}>
+                        <div className={fr.cx("fr-radio-group")}>
                             <input
                                 type="radio"
                                 id={acceptInputId}