classname on Link and JSX | Next.js | Page 1

Hey, I am trying to style a Link via style jsx but for some reason the styles won't be applied to it...

<div className="actions">
   <Link className="action" href={'/recipes/' + slug}>
    Cook this
  </Link>
</div>
<style jsx>
  .action {
          color: #fff;
          background: #f01b29;
          padding: 16px 24px;
          text-decoration: none;
        }
</style>

output be like:

<div class="jsx-56b784a67d3b149d actions">
  <a class="action" href="/recipes/french-cousine">
    Cook this
  </a>
</div>

#classname on Link and JSX