Как достичь тегов агностических компонентов?

Question

Если я хочу кнопку, но, только презентационную часть этого, так что если я делаю:

import styled from 'styled-components' 

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

Я вынужден вынести button тег, но что, если семантически мне нужен якорь?

Answer 1

Поскольку мы просто используем JavaScript, почему бы не использовать функцию?

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

const Button = myButtonStyle(styled, 'button') 

Answer 2

Вы также можете использовать его вместе с якорной биркой, вам нечего останавливать.

import styled from 'styled-components' 

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

Если вы хотите сохранить как, вы можете использовать стили, выдвинув их:

import styled from 'styled-components' 

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

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

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

Answer 3

я задал тот же вопрос, на стилизованных-компоненты системы отслеживания проблем: https://github.com/styled-components/styled-components/issues/494

И нынешнее «решение», которое я нашел, это:

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

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

И тогда, когда это необходимо:

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

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

export default Button 

И наконец:

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 

Вот полный функционирующий пример: https://codesandbox.io/s/6881pjMLQ

Answer 4

стилизованных-компоненты обеспечивает withComponent, что будет полезно для случаев, когда вы хотите использовать другой тег с компонентом. Это похоже на ответ @ siddharthkp в функции, но использует API.

Пример из документации:

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