Блог

Главная - Вопросы по программированию - Не удается правильно настроить вес шрифта в react

Не удается правильно настроить вес шрифта в react

#reactjs #typescript

Вопрос:

Я пытаюсь придать вес шрифту моему интервалу в виде встроенного css.

 interface Label {
    title: string;
    fontSize: string;
    fontColor: string;
    fontFamily: string;
    fontWeight: string;
}
const Label = (props:Label) => {
    return (
        <span style={{color:props.fontColor,fontSize:props.fontSize,fontFamily:props.fontFamily,fontWeight:props.fontWeight}}>{props.title}</span>
    )
}

Это доставляет мне Type 'string' is not assignable to type 'FontWeight удовольствие .
Я называю этот компонент так

 <Label title="SYNOASSESS" fontSize="30.1638px"  fontFamily="Futura" fontColor="#2789FC" fontWeight="bold" />

Если я напишу

 <span style={{color:props.fontColor,fontSize:props.fontSize,fontFamily:props.fontFamily,fontWeight:"bold"}}>{props.title}</span>

Тогда все работает нормально, но FontWeight не работает с реквизитом.

Комментарии:

1. Вы уверены, что используете, а не так, как в ошибке, которую она показывает, когда вы используете везде fontWeight FontWeight FontWeight fontWeight

2. Похоже, у тебя есть типаж FontWeight . Таким образом, строковое значение не может быть присвоено ему без приведения.

3. Да, я уверен, что везде использую вес шрифта, а не вес шрифта

4. Пожалуйста, проверьте отредактированный вопрос

Ответ №1:

TS знает не больше, чем fontWeight строка. Поэтому нужно сделать кастинг типов.

 interface LabelProps {
  title: string;
  fontSize: string;
  fontColor: string;
  fontFamily: string;
  fontWeight: string;
}

const Label = (props: LabelProps) => {
  const boldText = {
    fontWeight: props.fontWeight
  } as React.CSSProperties;

  return (
    <span
      style={{
        color: props.fontColor,
        fontSize: props.fontSize,
        fontFamily: props.fontFamily,
        fontWeight: boldText.fontWeight
      }}
    >
       {props.title}
    </span>
  );

песочница

или вы можете обернуть весь объект стиля с помощью React.Свойства CSS.

 const styles = {
  color:props.fontColor,
  fontSize:props.fontSize,
  fontFamily:props.fontFamily,
  fontWeight:props.fontWeight
 } as React.CSSProperties;`

Ответ №2:

Машинописный текст не понимает «fontWeigth». Вы можете посмотреть этот вопрос, чтобы понять больше. Можете ли вы попробовать код ниже

 import React from "react";
import { render } from "react-dom";

interface Label {
    title: string;
    fontSize: string;
    fontColor: string;
    fontFamily: string;
    'font-weight': string;
}
const Label = (props:Label) => {
    return (
        <span style={{color:props.fontColor,fontSize:props.fontSize,fontFamily:props.fontFamily,fontWeight:props['font-weight']}}>{props.title}</span>
    )
}
function App() {
  return (
      <div className="App">
        <Label title="SYNOASSESS" fontSize="30.1638px"  fontFamily="Futura" fontColor="#2789FC" font-weight="bold" />
      </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Ответ №3:

Один из способов сделать это-использовать это:

 const styles = {color:props.fontColor,fontSize:props.fontSize,
fontFamily:props.fontFamily,fontWeight:props.fontWeight} as React.CSSProperties;

и затем:

 <span style={styles}>{props.title}</span>
Метки: