Updating the Styling of a component passed in - ReactJS

Question

I am fairly new to React and I am stuck in styling a component using styled components.

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>

Here is what I have in my 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>
);

I have no idea what I am doing wrong, and I would really appreciate some guidance.

Thank you.

Answer 1

Hmm did you read the documentation for styled components? they are styled COMPONENTS

which means when you specify

const Button_One = styled.button`
 cursor: pointer
`

you need to use it as component

<Button_one ...props />

You can't pass style={StyledComponent} it's component not object literal with style. IF you want to extend the styled components here is the link https://www.styled-components.com/docs/basics#extending-styles

Answer 2

When used styled-components , you're creating a new component with a certain styles. For your search bar, you're creating a component named SearchBarContainer_Button as that is your variable name. You do not need to add the style again. Try reviewing the documentation, or reference this example;

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

And to use your component Title with the specified styles:

<Title>Content of component</Title>