vue-styled-components

Support

yarn add vue-styled-components

Usage

Basic

• 注释：styled生成的组件默认含有插槽

import styled from 'vue-styled-components';
const App = styled.div`
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
`;
const Nav = styled.div`
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
`

export default {
  render() {
    return <App>
      <Nav>
        <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
      </Nav>
      <router-view />
    </App>
  }
}

Adapting based on props

• 注释：带有props的styled组件

import styled from 'vue-styled-components';

const btnProps = { primary: Boolean };

const StyledButton = styled('button', btnProps)`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

export default StyledButton;

<styled-button primary>Primary</styled-button>