标签: glamorous

我已经尝试了用于css-in-js的迷人图书馆,并且无法绕过一件事.

使用vanilla css,您可以轻松地将类型添加到类中的所有选择器,例如:

.my-awesome-class div {
  margin-right: 10px;
}

有没有办法用迷人的方式来实现它？例如,在这个代码片段中,我正在寻找一种方法来声明容器内的所有div应该具有margin-right20px,而无需将其传递给每个组件:

import React from 'react';
import { render } from 'react-dom';
import glamorous, {Div} from 'glamorous';

const Container = glamorous.div({
  display: 'flex'
});

class App extends React.Component {
  render() {
    return (
      <Container>
        <Div backgroundColor="tomato" padding="10px">One</Div>
        <Div backgroundColor="wheat" padding="10px">Two</Div>
        <Div backgroundColor="salmon" padding="10px">Three</Div>
      </Container>
    );
  }
}

render(<App />, document.getElementById('root'));

这是工作片段的链接:https: //stackblitz.com/edit/glemorouschildselector

当我输入一个不存在的 url 时，我试图呈现一个组件。但是，该组件会在所有路由中保持渲染。我正在使用react-router-dom@4.1.1. 这是我设置的路线：

import * as React from "react";
import { Route, RouteComponentProps } from "react-router-dom";
import glamorous from "glamorous";
import ElementList from "./elementlist";
import AddElement from "./addelement";
import NotFound from "./NotFound";

const Styling = glamorous.div({
  minHeight: 5,
  minWidth: 8
});

const NavRouter = () => (
  <Styling>
    <Route path="/" exact={true} component={ElementList} />
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="*" exact={true} component={NotFound}/>
  </Styling>
);

export default NavRouter;

这是我的NotFound …