更新傳入的組件的樣式-ReactJS

Question

我對React還是很陌生，我被困在使用樣式化組件對組件進行樣式設置中。

const SearchBarContainer_Button = styled.button`
      padding: 10px;
      margin-left: 10px;
      width: 300px;
`;


<ButtonOne
  style={SearchBarContainer_Button}
  type="submit"
  className="search-bar__button"
>
  {this.props.buttonText || 'search'}
</ButtonOne>

這是我ButtonOne的功能：

import React from 'react';
import styled from 'styled-components';

const Button_One = styled.button`
      cursor:pointer;
      border: none;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      font-weight: 900;
`;

export const ButtonOne = (props) => (
  <Button_One className={props.className}>{props.children}</Button_One>
);

我不知道自己在做什么錯，我非常感謝您提供一些指導。

謝謝。

Answer 1

嗯，您閱讀過樣式化組件的文檔嗎？ 他們被稱為組件

這意味着當您指定

const Button_One = styled.button`
 cursor: pointer
`

您需要將其用作組件

<Button_one ...props />

您不能傳遞style={StyledComponent}它的組件不是帶有樣式的對象文字。 如果要擴展樣式化的組件，請在此處鏈接https://www.styled-components.com/docs/basics#extending-styles

Answer 2

使用styled-components時 ，您將創建具有特定樣式的新組件。 對於您的搜索欄，您正在創建一個名為SearchBarContainer_Button的組件，因為這是您的變量名。 您無需再次添加樣式。 嘗試查看文檔，或參考此示例；

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;
`;

並以指定的樣式使用組件Title ：

<Title>Content of component</Title>