Wie erreicht man tag agnostic gestylte Komponenten?

Question

Wenn ich einen Knopf will aber nur den Präsentations-Teil davon, wenn ich also tun:

import styled from 'styled-components' 

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

ich gezwungen bin, einen button Tag zu machen, aber was ist, wenn semantisch ich einen Anker brauche?

Answer 1

Da wir nur JavaScript verwenden, warum nicht eine Funktion verwenden?

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

const Button = myButtonStyle(styled, 'button') 

Answer 2

Sie können es auch mit einem Anker-Tag verwenden, es gibt nichts, was Sie daran hindert.

import styled from 'styled-components' 

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

Wenn Sie beide behalten möchten, können Sie die Stile wiederverwenden, indem sie herausziehen:

import styled from 'styled-components' 

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

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

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

Answer 3

Ich habe die gleiche Frage auf Stil-Komponenten issue tracker gestellt: https://github.com/styled-components/styled-components/issues/494

und die aktuelle „Lösung“, die ich gefunden habe, ist:

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

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

und dann, wenn Sie es brauchen:

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

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

export default Button 

Und schließlich:

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 

Hier ein voll funktionierendes Beispiel: https://codesandbox.io/s/6881pjMLQ

Answer 4

Stil-Komponenten bietet withComponent, die für Fälle nützlich sein werden, wo Sie eine eine andere verwenden möchten Tag mit einer Komponente. Dies ähnelt der Antwort von @ siddharthkp in der Funktion, verwendet aber die API.

Beispiel aus der Dokumentation:

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> 
);