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

嗯，您是否阅读过样式组件的文档？它们的样式为 COMPONENTS

表示指定

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

更新传入的组件的样式 - ReactJS

2 个答案: