CODEWITHSUNDEEP
cssreactjsstylinginline-styles
heretolearn
heretolearn

Reputation: 83

REACT Cant convert my styling to inline styles

I need to take some button styling and apply it to some inline styling. I thought this would be a simple copy and paste but when I try that I have a whole host of errors. I've tried to convert the styles to inline format but I keep chasing errors I don't know how to resolve.

Thanks for the help.

The following is the button I am trying to apply styling to.

                <BtnWrap>
                  {navToPage && navToPage.startsWith("/") ? (
                    //if it is linked to another page use router link
                    <LinkR to={navToPage} style={{}}>
                      {navToPage}
                    </LinkR>
                  ) : (
                    //else use the smart link component
                    <Button
                      to={navToPage}
                      smooth={true}
                      duration={500}
                      spy={true}
                      exact="true"
                      offset={-80}
                      primary={primary ? 1 : 0}
                      dark={dark ? 1 : 0}
                      dark2={dark2 ? 1 : 0}
                    >
                      {buttonLabel}
                    </Button>
                  )}
                </BtnWrap>

This is the button styling I am trying to convert to inline styling.

export const Button = styled(Link)`
  border-radius: 50px;
  background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
  white-space: nowrap;
  padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
  color: ${({ dark }) => (dark ? "#010606" : "#fff")};
  font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
  }
`;

Upvotes: 0

Views: 536

Answers (1)

Leandro Curbelo
Leandro Curbelo

Reputation: 94

Styles in React.js are a kind of object that is passed inside the style property like this

style={{ marginTop: 10, backgroundColor: 'red' }}

I leave some references that can help you:

Upvotes: 1

Related Questions