Как можно улучшить этот код компонента?

Question

Учусь писать компоненты, вот набросал.

Вопрос. Можно ли работать с styled-components более удобнее? Постоянно писать подобные условия для свойств утомительно и не очень красиво, как по мне.

index.js

import { Button } from "./Button";
Button.defaultProps = {
  color: "primary",
  shadow: true
};
export { Button };

Button.js

import React from "react";
import styled from "styled-components";
const ButtonDefault = ({ children = "Отправить", className, onClick }) => (
  <div className={className} onClick={onClick}>
    {children}
  </div>
);
export const Button = styled(ButtonDefault)color: ${({ color }) =&gt; color === &quot;dark&quot; ? &quot;white&quot; : color === &quot;light&quot; ? &quot;black&quot; : &quot;white&quot;}; background: ${({ color }) =&gt; color === &quot;dark&quot; ? &quot;black&quot; : color === &quot;light&quot; ? &quot;white&quot; : color === &quot;primary&quot; ? &quot;blue&quot; : color}; display: inline-block; padding: 14px; cursor: pointer; border-radius: 3px; border: ${({ color }) =&gt; (color === &quot;light&quot; ? &quot;1px solid black&quot; : &quot;none&quot;)}; box-shadow: ${({ shadow }) =&gt; shadow &amp;&amp; &quot;2px 2px 4px black;&quot;}; :hover { opacity: 0.8; };