ReactでStyled-componentsを使用せずに動的にstyleを変更したい

Question

React初学者です。
Styled-componentsを使用せずに動的にstyleを適用したいです。

button.tsx
~
~
export const Button: React.FC<TButtonProps> = ({height,width,borderRadius,type})=>{
  let style = `
      height: ${height};
      width: ${width};
     `
  if (type === 'round') {
    style += 'border-radius: 100px;'
  } else if (type === 'customRadius') {
    style += `border-radius: ${borderRadius};`
  }
  return (
    <button
      className={hoge}
      style={style}>
    </button>
}

test.tsx
export default () => {
  console.log(BaseButton.defaultProps)
  return (
    <div>
      <BaseButton height={100} type={customRadius} borderRadius={60}></BaseButton>
    </div>
  )
}

しかし、現行のコードでは
styleに
TS2322: Type 'string' is not assignable to type 'CSSProperties | undefined'.
というエラーがでます。
Styled-componentsを使わずにstyleに変数を持たせる方法をおしえて欲しいです

Answer 1

エラーメッセージのとおり、React内ではCSSは文字列ではなく、オブジェクトとして管理します（React公式）。