[英]Updating the Styling of a component passed in - ReactJS
我对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>
);
我不知道自己在做什么错,我非常感谢您提供一些指导。
谢谢。
嗯,您阅读过样式化组件的文档吗? 他们被称为组件
这意味着当您指定
const Button_One = styled.button`
cursor: pointer
`
您需要将其用作组件
<Button_one ...props />
您不能传递style={StyledComponent}
它的组件不是带有样式的对象文字。 如果要扩展样式化的组件,请在此处链接https://www.styled-components.com/docs/basics#extending-styles
使用styled-components时 ,您将创建具有特定样式的新组件。 对于您的搜索栏,您正在创建一个名为SearchBarContainer_Button
的组件,因为这是您的变量名。 您无需再次添加样式。 尝试查看文档,或参考此示例;
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;
并以指定的样式使用组件Title
:
<Title>Content of component</Title>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.