Javascript React样式的组件不'；不能显示正确的输出

我在StyledButton标签中更改了我的样式，但它并没有反映在网页上。你能帮我找出这段代码的错误吗

   import React, { Component } from 'react';
    import './App.css';
    //import Radium, {StyleRoot} from 'radium';
    import Person from './Person/Person';
    import { render } from 'react-dom';
    import styled from 'styled-components'

const StyledButton = styled.button `
background-color:  ${props => props.alt ? 'red' : 'green'};   //Here I have define these property which is not reflecting in output
color: white;
font: inherit;
border: 1px solid blue;
padding: 8px;
cursor:pointer;
&:hover:{
  background-color:${props => props.alt ? 'salmon' : 'green'}; //Hover Function is also not working
  color:black;
}`;

class App extends Component {
state ={
  persons : [
{id:'12', name: 'Max', age: 28},
{id:'21', name: 'Manu', age:29},
{id:'33', name: 'Nikhil', age:23}
]};
nameChangeHandler = (event, id) => {
  const personIndex = this.state.persons.findIndex(p=>{
    return p.id===id;
  });

  const person = {
    ... this.state.persons[personIndex]
  };

  person.name = event.target.value;
  const persons =[...this.state.persons];
  persons[personIndex]=person;

  this.setState({ persons: persons
});
}

deletePersonHandler = (personIndex) =>{
  //const persons = this.state.persons.slice();
  //const persons = this.state.persons
  const persons = [... this.state.persons];
  persons.splice(personIndex,1);
  this.setState({persons: persons})
}

togglePersonsHandler = ()=> {
  const doesShow = this.state.showPersons;
  this.setState({showPersons: !doesShow});
}

render()
{
  let persons = null;
    if(this.state.showPersons)
      {
      persons = (
        <div>
        { this.state.persons.map((person, index) =>{
          return <Person
           click = { () => this.deletePersonHandler(index) }
           name={person.name}
           age={person.age}
           key= {person.id}
           changed={(event)=> this.nameChangeHandler(event, person.id)}/>
        })}
    </div>
    );
    //StyledButton.backgroundColor= 'red';

      }

let classes = []
if(this.state.persons.length<=2)
{
  classes.push('red');
}
if(this.state.persons.length<=1)
{
  classes.push('bold');
}

  return (

    <div className = "App">
      <h1>Hi there this is my first react application</h1>
      <p className= {classes.join(' ')}>Hi this is really working</p>
      <StyledButton
       alt ={ this.state.showPersons }
       onClick = {this.togglePersonsHandler}>Toggle Persons</StyledButton>
       { persons }


    </div>


  );

}
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
//从“镭”导入镭，{StyleRoot}；
从“./人/人”导入人；
从'react dom'导入{render}；
从“样式化组件”导入样式化
const StyledButton=styled.button`
背景色：${props=>props.alt？'red'：'green'}//在这里，我定义了输出中没有反映的这些属性
颜色：白色；
字体：继承；
边框：1px纯蓝色；
填充：8px；
光标：指针；
&：悬停：{
背景色：${props=>props.alt？'salmon'：'green'}；//悬停函数也不起作用
颜色：黑色；
}`;
类应用程序扩展组件{
陈述={
人员：[
{id:'12'，姓名：'Max'，年龄：28}，
{id:'21'，姓名：'Manu'，年龄：29}，
{id:'33'，姓名：'Nikhil'，年龄：23}
]};
nameChangeHandler=（事件，id）=>{
const personIndex=this.state.persons.findIndex（p=>{
返回p.id==id；
});
const person={
…此.状态.个人[个人索引]
};
person.name=event.target.value；
const persons=[…this.state.persons]；
人员[人员索引]=人员；
本.集合状态（{人：人
});
}
deletePersonHandler=（personIndex）=>{
//const persons=this.state.persons.slice（）；
//const persons=this.state.persons
const persons=[…this.state.persons]；
人员。拼接（人员索引，1）；
this.setState（{persons:persons}）
}
TogglePersonHandler=（）=>{
const doesShow=this.state.showPersons；
this.setState（{showPersons:！doesShow}）；
}
render（）
{
让persons=null；
如果（本.州.表演人）
{
人员=(
{this.state.persons.map（（person，index）=>{
返回此.deletePersonHandler（索引）}
name={person.name}
年龄={person.age}
key={person.id}
changed={（event）=>this.nameChangeHandler（event，person.id）}/>
})}
);
//backgroundColor='red'；
}
让类=[]
如果（this.state.persons.length您已将
alt
定义为a，即
$alt
，但未将该属性传递给
样式按钮

您的鼠标悬停选择器中还有一个输入错误，后面有一个冒号（
：
）：
&:hover:
应该是
：hover
（前面的父节点选择器
&
也不需要）

演示
您使用的是什么版本的
样式化组件
吗？是否只是背景色没有按预期工作？您正在检查
道具。$alt
但是您传递的属性是
alt
。@drewerese Yes背景色在{this.state.showPersons}时不工作是真是假，我正在使用5.2.3最新版本的
样式化组件
他们刚刚编辑了他们的问题…这似乎意味着这不是问题所在？使用alt仍然没有看到任何更改，顺便说一句，感谢您提供的详细信息。@NikhilKarnwal您在悬停伪选择器上还有一个尾随冒号。请检查更新的答案。
const StyledButton = styled.button `
  background-color: ${props => props.$alt ? 'red' : 'green'};
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
  :hover {
    background-color:${props => props.$alt ? 'salmon' : 'green'}; 
    color:black;
  }
`;

...

<StyledButton
  $alt={this.state.showPersons} // <-- pass transient prop
  onClick={this.togglePersonsHandler}
>
  Toggle Persons
</StyledButton>

const StyledButton = styled.button `
  background-color: ${props => props.alt ? 'red' : 'green'};
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
  :hover {
    background-color:${props => props.alt ? 'salmon' : 'green'}; 
    color:black;
  }
}`;

...

<StyledButton
  alt={this.state.showPersons} // <-- use alt prop
  onClick={this.togglePersonsHandler}
>
  Toggle Persons
</StyledButton>