如何在操作后更改导航栏中的所有样式

Question

这是我的组件。它工作得很好，但是。

我的样式有问题。滚动后，导航栏设置状态并将 NavbarScroll 添加到导航栏。我如何设置此组件中所有子树元素的样式。我需要更改菜单组件中的每个元素和组件：

所有 Link (a) 和徘徊
徽标路径 img

按钮

export class Navbar extends Component{
    constructor(props){
        super(props);
        this.handleScroll = this.handleScroll.bind(this);
        this.state={Navbar: 'Navbar'}
      }

        componentDidMount() {
          window.addEventListener('scroll', this.handleScroll);
        };

        handleScroll() {
            let Navbar = this.state.Navbar
             this.setState( {Navbar : 'Navbar ' + 'NavbarScroll' } )
     };


    render(){
        return(

            <div onScroll={this.handleScroll.bind(this)} className ={this.state.Navbar}>
                <Container>
                    <Row>
                        <Col sm={{size:3,}}>Logo</Col>
                        <Col><Menu/></Col>
                    </Row>
                </Container>
            </div>

        )
    }
}

Answer 1

像这样将状态传递给菜单：

<Menu navbarState={this.state.Navbar} />

然后在菜单组件中说一个按钮：

<button className={props.navbarState} />

这会添加适当的 class 以便您可以在 css:

中进一步使用它

button.Navbar {
   styles for normal navbar
}

button.Navbar.NavbarScroll {
   styles for scrolled navbar
}

如果您的菜单不受控制组件启动为

，则此示例有效

const Menu = (props) => {
}

如果是 class 像

class Menu extends React.Component

那么你应该在 props 之前添加这个：

<button className={this.props.navbarState} />

如何在操作后更改导航栏中的所有样式

How to change All Styles in Navbar after actions

subtree

styling

reactjs