How can I determine a different color for a button inside an app div?-CodePudding

I have a simple App :

function App() {

  const [base,setBase] = useState("")
  const [code,setCode] = useState("")

  return (
    <div className="currency">
       ...
      <button className="btn" type="button">Get</button>

    </div>
    
  );

I'm trying to use css to make a color for a button:

.App {
  text-align: center;
}

.currency {
  background-color: aqua;
  position: absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}


.btn{
  position: absolute;
  width: 100px;
  height: 50px;
  top: 10%;
  margin: 400px 0 0 350px;
  padding: 16px 42px;
  box-shadow: 0px 0px 12px -2px rgba(67, 65, 73, 0.5);
  line-height: 1.25;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
  overflow: hidden;
  background-color: blue;
  color: #000;
  
}

But whatever I do , the color is not assigned , the div currency color is always assigned.

You can't take it outside of currency, and if you put the button itself in a div, the same thing. Can you tell me what to do to assign a color?

https://codesandbox.io/s/divine-wood-sf80ed?file=/src/App.css

CodePudding user response：

When I go to the codesandbox, it initially shows white. If I modify the selector to add div.currency, it turns green. Try making the button style more selective:

div.currency .btn {
    background-color: rgb(103, 196, 91);
}