Как заметил
Валерий, ошибка, скорее всего, потому, что передаете число. Попробуйте передавать строку (можно использовать
"обратные кавычки"):
<p
style={
SIZES.MAX > 0 ? {
bottom: `${(669 * size) / SIZES.MAX}px`,
color: `red`
} : {
bottom: `${(669 * size)}px`,
color: `blue`
}
}
>
Но вообще, если стилей много, я бы вынес это из "инлайна". Например, через функцию:
class MyParagraph extends React.Component {
render() {
//init values
const SIZES = {MAX: 45};
const size = 1;
//get styles
function getParagraphStyles(condition) {
if (condition > 0) {
return {
bottom: `${(669 * size) / SIZES.MAX}px`,
color: `red`,
}
} else {
return {
bottom: `${(669 * size)}px`,
color: `blue`,
}
}
}
return (
<p style={getParagraphStyles(SIZES.MAX)}>
Paragraph
</p>
)
}
};
Еще лучше getParagraphStyles() вынести в метод (если используете классовый подход) или в хук (если используете функциональный подход). Вместо if .. else можно и тернарник заюзать. Можно и стрелку написать - еще короче будет. Но сделал подробнее для наглядности. И да, как заметил
Валерий, не забывайте указывать единицы измерения (px, скорее всего). React вроде CSS проверяет и ошибочный не пропускает.
