use styled-components in a React Native component with a predefined prefix

0

Hello, I'm starting to work with React and I found the style-components that me allows you to stylize elements in my component and autoprefix. My problem starts from there. I have the following component as an example:

NavbarComponent

import React, { Component } from 'react';
import styled from 'styled-components';

const Wrapper = styled.header'
  width: 100%;
  background-color: red;
';
const LinkMenu = styled.a'';

class NavbarComponent extends Component {
  render() {
    return (
      <Wrapper>
        <LinkMenu>Home</LinkMenu>
      </Wrapper>
    );
  }
}

export default NavbarComponent;

When the component is rendered, the result I get is this:

<div>
  <header class="sc-bdVaJa hiPDOV">
    <a class="sc-bwzfXH uTxCW">Home</a>
  </header>
<div>

I would like to remove the "sc-" from the classes. So it will not be possible to identify that "styled-components" were used. Is there any way to do this?

Looking at google I found this issue direct in the styled-components How do you specify which prefixes you want that is exactly what I want to do but that, as I understand it does not allow removal of the prefix.

    
asked by anonymous 09.05.2018 / 22:49

0 answers