我想做的事

根据使用从组件传递的道具更改颜色styled component。

问题

SmallButton组件肯定会得到，props但不会像道具所示的那样改变。

我想更改SmallButton依赖于props组件赋予按钮组件的样式。SmallButton拥有这些道具，但完全没有改变。

我想请您教我如何解决。

非常感谢你。

=== ==== === ===我的代码是这样的。

Header.jsx

render() {
    return (
      <>
        <Wrapper>
          {/* CSS Grid( 1 : 1 : 1) 左 */}
          <Image src={Logo} alt="" />
          {/* CSS Grid( 1 : 1 : 1) 中央 */}
          <SearchBox />
          {/* CSS Grid( 1 : 1 : 1) 右 */}
          {this.props.isAuthenticated ? (
            <>
              <div>
                <MessageToUserDiv>
                  <span>Hello {this.state.loginUser.username}</span>　
                  <LogoutButton onClick={this.handleLogout}>Logout</LogoutButton>
                </MessageToUserDiv>
                <AuthButtonDiv>
                  <SmallButton
                    btn_border="#466A80"
                    btn_back="#466A80"
                    btn_text_color="#D9F1FF"
                    btn_name="Post"
                    btn_click={this.jumpToPostGive}
                  />
                  <SmallButton
                    btn_border="#466A80"
                    btn_back="#8DD6FF"
                    btn_text_color="#466A80"
                    btn_name="Info"
                    btn_click=""
                  />
                </AuthButtonDiv>
              </div>
            </>
          ) : (
            <>
              <div>
                <p>Hello Guest</p>
                <AuthButtonDiv>
                  <SmallButton btn_name="Register" btn_click={this.jumpToRegister} />
                  <SmallButton btn_name="Login" btn_click={this.jumpToLogin} />
                </AuthButtonDiv>
              </div>
            </>
          )}
        </Wrapper>
      </>
    );
  }
}

const Wrapper = styled.div`
  background-color: #8dd6ff;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2.3fr 1fr;
  padding: 10px 5px 5px 5px;
`;

const Image = styled.img`
  width: 230px;
  margin-top: 5px;
`;

const MessageToUserDiv = styled.div`
  font-size: 13px;
  text-align: right;
  height: 20%;
`;

const LogoutButton = styled.button`
  color: #6e787f;
  width: 30%;
`;

const AuthButtonDiv = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 80%;
`;

SmallButton.jsx

class SmallButton extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <StyledButton
        type={this.props.btn_type}
        onClick={this.props.btn_click}
        onSubmit={this.props.btn_submit}
        disabled={this.props.btn_disable}
      >
        {this.props.btn_name}
      </StyledButton>
    );
}
}

const Colors = {
  main: '#8DD6FF',
  characters: '#6C7880',
  subcolor1: '#D9F1FF',
  accent1: '#70AACC',
  accent2: '#466A80',
};

const StyledButton = styled.button`
  font-size: 1.18em;
  border-radius: 7px;
  height: 45px;
  width: 100px;
  padding: 2px 3.5px;
  border: solid 2.5px;
  border-color: ${(props) => props.btn_border};
  background: ${(props) => props.btn_back};
  color: ${(props) => props.btn_text_color};
`;