Nested Components Taking CSS Based On Type in React?

I noticed that there's a discrepancy in React where a CSS file won't be applied to nested components unless they're a class that extends React.Component:

A.css:
Button {
  background-color: blue;
}

Main.tsx:
import '../A.css';
return <>
  <FirstAttempt /> <- This works, A.css applies to Test 1
  <SecondAttempt /> <- This does not work, Test 2 does not get A.css
</>

FirstAttempt.tsx:
class FirstAttempt() extends React.Component
{
  render()
  {
    return <Button>Test 1</Button>
  }
}

FirstAttempt.tsx:
function SecondAttempt() 
{
  return <Button>Test 2</Button>;
}

Does anyone know why this happens?

Edit: I found the source of my original issue but I believe this is a problem with some CSS attributes and not others. Ex: border-radius has this issue but background-color does not.