How to change the style of a Komponent that was imported into React with Styled-Component

Asked

Viewed 78 times

-1

I created a component called "Searchbox":

const Input = styled.input`
border: 1px solid black;
width: 450px;
margin-right: ${props => props.marginRight == "ativo" ? '100px' : '0px'};
`;

I imported it in App.js and passed inside the tag "Searchbox" a property called "marginRight"

<SearchBox type="text" marginRight = "ativo" />
<SearchBox type="text" />

However, the margin-right is not occurring in either of the two inputs... even though I pass the "active" value in the marginRight property

Website: https://livraria-cactus.vercel.app/

javascript react

  • Oops, speak Eonardo, can you give more detail of your code? why I ran an example here and it worked normal, yours gives some error?

  • 1

    you created a component with the name Input and used Searchbox, remember that putting the minimum example makes total difference in the answer.

  • Hello guys, I appreciate your help, here it worked yes, sorry the delay to answer, I ran out of computer for a while... Thanks really

1 answer

0


Basically I did the test in your code and it’s working perfectly, of course I use <Input /> which has been the declared component, example:

const Input = window.styled.input`
border: 1px solid black;
width: 200px;
height: 24px;
margin-right: ${props => props.marginRight === "ativo" ? '100px' : '0px'};
`;

function App() {
  return (
    <div>
      <Input marginRight="ativo"/>
      <Input />
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script><script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root">Carregando ...</div>

Usually when doing this type of approach where the component created by Styled-Components is best used in the property for the style of margin the true or false type because the value has only two possible values, example:

const Input = window.styled.input`
border: 1px solid black;
width: 200px;
height: 24px;
margin-right: ${props => props.marginRight ? '100px' : '0px'};
`;

function App() {
  return (
    <div>
      <Input marginRight/>
      <Input />
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script><script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root">Carregando ...</div>

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.