How to achieve tag agnostic styled components?

styled-components withcomponent
styled-components anchor tag
styled-components typescript
styled-components attrs
styled-components as prop
styled component dynamic tag
styled-components nested elements
styled-components enzymefind

If I want a button but, only the presentational part of that, so if I do:

import styled from 'styled-components'

const Button = styled.button`
  color: red;
  text-align: center;
`

I'm forced to render a button tag, but what about if semantically I need an anchor?

Use the "as" polymorphic prop in v4

copy/pasta from the example in the docs:

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

javascript - How to achieve tag agnostic styled components?, You can use it with a anchor tag as well, there's nothing stopping you. import styled from 'styled-components' const Button = styled.a` color: red;  This is a proposal for an improvement, based on a question I've asked on gitter. I think that the styled component creation process should be tag agnostic: you shouldn't be forced to specify an element tag prematurely, as you may need to

You can use it with a anchor tag as well, there's nothing stopping you.

import styled from 'styled-components'

const Button = styled.a`
  color: red;
  text-align: center;
`

If you want to keep both, you can reuse the styles by pulling them out:

import styled from 'styled-components'

const styles = `
  color: red;
  text-align: center;
`

const Button = styled.button`
  ${styles}
`

const LinkButton = styled.a`
  ${styles}
`

Styled components should be "tag agnostic" · Issue #494 · styled , The fact of the matter is, the style of the component has very little to with the html tag it is rendered in. Sure, it wouldn't make sense to render this  The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4. According to docs createGlobalStyle is. A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components.

I've asked the same question on styled-components issue tracker: https://github.com/styled-components/styled-components/issues/494

And the current "solution" that I've found is:

// agnosticStyled.js
import React from 'react'
import styled from 'styled-components'

export default styled(
  ({tag = 'div', children, ...props}) =>
    React.createElement(tag, props, children)
)

And then when you need it:

import React from 'react'
import styled from './agnosticStyled'

 const Button = styled`
   color: palevioletred;
   text-transform: uppercase;
 `

 export default Button

And finally:

import React from 'react'
import Button from './Button'

const Component = () => 
  <div>
    <Button>button</Button>
    <Button tag="button">button</Button>
    <Button tag="a" href="https://google.com">button</Button>
   </div>

export default Component 

Here a full functioning example: https://codesandbox.io/s/6881pjMLQ

javascript: How to achieve tag agnostic styled components?, If I want a button but, only the presentational part of that, so if I do:import styled from 'styled-components'const Button = styled.button` color: red; text-align: center​  It has been said many times the future of the lodging industry will greatly be affected by hotels’ ability to appeal to millennials. On the surface, this “millennials or bust” attitude seems like a logical view to endorse. After all, millennials now outnumber baby boomers in the U.S., and millennials are expected to account for …

Since we're just using JavaScript, why not use a function?

const myButtonStyle = (styled, tag) => {
  return styled[tag]`
    color: red;
    text-align: center;
  `
}

const Button = myButtonStyle(styled, 'button')

How to achieve tag agnostic styled components?, You can use it with a anchor tag as well, there's nothing stopping you. import styled from 'styled-components' const Button = styled.a` color: red; text-align: center  Far from being decoration, a content agnostic approach forces us to produce a robust design solution that doesn’t impose itself on future content. Design precedes content. Content in the absence of design is not content, it’s a brief.

styled-components provides withComponent that'll be useful for cases where you want to use an a different tag with a component. This is similar to @siddharthkp's answer in function, but uses the API.

Example from the documentation:

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We're replacing the <button> tag with an <a> tag, but reuse all the same styles
const Link = Button.withComponent('a')

// Use .withComponent together with .extend to both change the tag and use additional styles
const TomatoLink = Link.extend`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <Link>Normal Link</Link>
    <TomatoLink>Tomato Link</TomatoLink>
  </div>
);

Ecosystem, Build responsive, semantic layouts fast with this design-agnostic toolkit. ReaKit. Toolkit for building Create a React component from a tag prop. Lets your users to choose which HTML elements get styled. grommet-icons. Iconography for  A great resource for getting started with styled-components which really helped me is Simon Vrachliotis’ egghead.io styled-components playlist which is a great foundation for starting out with

Advanced Usage, This component provides a theme to all React components underneath itself via the context API. To avoid this issue, make sure your component attaches the passed-in Since the rule contains a classname and two tag names, it has higher  @steida I'm also trying to take a rebass approach with styled-components, and ran into the same questions with how to deal with Headings, Buttons, Texts, etc.. where you want them to share styles with a different html tag. I landed on the following approach, but I think it can be improved upon.

Basics, Get Started with styled-components basics. Create a Wrapper component that'll render a <section> tag with some styles. const Wrapper = styled.section`. For React, that means transforming components into JSX. For Angular, that means transforming components into directives. For Drupal that means transforming components to work with the Twig templating engine. The idea is to take the agnostic UI and convert it into a form where applications running specific technology can easily make use of.

How to Redesign Unsplash Using Styled Components, To get rid of the aforementioned issues, Styled Components was But with styled-components , the styles are loaded in the DOM using the <style> tag. to styled-components known as emotion which is framework agnostic. Usage note: Merriam-Webster defines an agnostic (noun) as “a person who holds the view that any ultimate reality (as God) is unknown and probably unknowable; broadly : one who is not committed to believing in either the existence or the nonexistence of God or a god.” However, when a hedgie (an execrable moniker for “hedge fund professional”) uses

Comments
  • Yes, but why should I create a brand new "style focused" component only for specify a different semantic tag?
  • Whoops, sorry for the super late reply. If you don't like the API for doing this, @typeoneerror's answer talks about the withComponent which can be useful: stackoverflow.com/a/47982898/1501871
  • If you're question is more about the library decision that styled-components folks made, they wanted to make it a convention to enforce the practice of separating style from logic. A good way to do that is to create a new style component every time. @mxstbr talks about it a little more here: youtube.com/watch?v=bIK2NwoK9xk
  • Using this approach, how do you get the ref of the element?
  • Dunno, I will experiment soon! What's your use case, in particular?
  • Alright let me know. For my use case, I'm creating a button where it can be a Link button, or an anchor button or a "button" button. Then, I would need to grab the "ref" of the button, so that I can use it as an anchor element for my dialog to pop up from. Basically for animation.
  • @cl0udw4lk3r Fantastic, you should mark this as accepted!
  • Because this way I'm still forced to do: const Button = myButtonStyle(styled, 'button') and const LinkButton = myButtonStyle(styled, 'a') when from a presentation point of view they are the same thing!