ejemplo de código de componentes con estilo de instalación de hilo

El tutorial o código que verás en este artículo es la resolución más rápida y válida que encontramos a esta inquietud o problema.

Ejemplo 1: componentes con estilo npm

npm i styled-components

Ejemplo 2: componentes con estilo de hilo

yarnadd styled-components

Ejemplo 3: componentes con estilo

npminstall --save styled-components

# yarn yarnadd styled-components

Ejemplo 4: componentes con estilo

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

  $props => props.primary && css`
    background: palevioletred;
    color: white;``;

const Container = styled.div`
  text-align: center;`

render(<Container><Button>Normal Button</Button><Button primary>Primary Button</Button></Container>);const Button = styled.button`  background: transparent;  border-radius: 3px;  border: 2px solid palevioletred;  color: palevioletred;  margin: 0.5em 1em;  padding: 0.25em 1em;  $props => props.primary && css`    background: palevioletred;    color: white;``;const Container = styled.div`  text-align: center;`render(<Container><Button>Normal Button</Button><Button primary>Primary Button</Button></Container>);
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty 
  -webkit-text-fill-color: inherit !important;

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .npm__react-simple-code-editor__textarea 
    color: transparent !important;

  .npm__react-simple-code-editor__textarea::selection 
    background-color: #accef7 !important;
    color: transparent !important;
Normal ButtonPrimary Button

Si piensas que ha resultado provechoso nuestro post, sería de mucha ayuda si lo compartieras con más desarrolladores y nos ayudes a extender nuestra información.

---

---

Utiliza Nuestro Buscador