Как передать пустое значение в качестве реквизита для кнопки пользовательского интерфейса материала

Question

Я использую троичный оператор в опоре для кнопки. Это работает нормально, но я получаю предупреждение в браузере о пустой строке и хотел узнать, есть ли лучший способ сделать это, чтобы я не получил ошибку.

<Button
    variant={activeButton === 'credit card' ? 'outlined' : 'contained'}
    //This terniary operator is throwing a warning in the console because MUI desn't like the empty string
    color={activeButton === 'credit card' ? 'primary' : ''}
    onClick={() => setActiveButton('credit card')}
>
    Credit Card
</Button>;

Изображение предупреждения консоли

Answer 1

Используйте undefined вместо пустой строки:

color={activeButton === 'credit card' ? 'primary' : undefined}

Передача undefined эквивалентна пропущению пропеллы полностью и позволит использовать значение по умолчанию для этого пропета (если определено в компоненте ), который будет применен.