Skip to content

Implement attributes parameter while creating a styled component #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Implement attributes parameter while creating a styled component #83

wants to merge 3 commits into from

Conversation

zaxozhu
Copy link
Contributor

@zaxozhu zaxozhu commented Aug 6, 2019

This is the first implementation that supports only a plain object that describes attrs. #68

import styled from 'vue-styled-components';
const StyledImage = styled('img', {}, { src: 'image.jpg', alt: 'Test image' })`
  width: 50px;
  height: 50px;
`;
export default StyledImage;

I'm planning to extend it similarly to the original styled components (having an attr key that takes a function):

const Input = styled.input.attrs(props => ({
  type: 'text',
  size: props.small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};

  ::placeholder {
    color: palevioletred;
  }
`

@zaxozhu zaxozhu changed the title Implement attributes parameter while creating a styled component #68 Implement attributes parameter while creating a styled component Aug 6, 2019
@zaxozhu zaxozhu mentioned this pull request Aug 9, 2019
@osikes
Copy link

osikes commented Aug 27, 2019

This would be awesome

@milesbeyond
Copy link

@liqueflies will this be merged in soon? Thanks

@PMK
Copy link

PMK commented Oct 14, 2019

@liqueflies will this be merged in soon? Thanks

Same here. Thanks

@null-char
Copy link

@liqueflies Any chance of this being merged?

@liqueflies
Copy link
Collaborator

Hello everyone,
hello @m-sebastiyan, and thank you for PR's!

This is basically correct, just try to do two things:

  1. Follow the main library pattern: you added a new parameter to the styled function, in the main library they passed to options and then statically added to constructor (https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constructors/constructWithOptions.js).
    Rest of code is good.

  2. Just rebase your branch with the new one and then we can check for merge :)

@BratecKrolik BratecKrolik mentioned this pull request May 24, 2020
liqueflies added a commit that referenced this pull request Nov 28, 2020
@liqueflies
Copy link
Collaborator

Solved merging #111

@liqueflies liqueflies closed this Nov 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants