Question

我按照下一个例子：

https://github.com/ant-design/ant-design/blob/master/components/form/demo/normal-login.md

组件代码和样式表分别描述。我该如何在反应组件中包含css？

我尝试创建login.css文件：

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}

然后将一个className（提交按钮）修改为：

import styles from './login.css';    
<Button type="primary" htmlType="submit" className={styles.login-form-button}>
    Log in
</Button>

但是webpack告诉我：

42:76  error  'form' is not defined    no-undef
42:81  error  'button' is not defined  no-undef

如何添加样式表？

Answer 1

让我们宣布该组件的soppouse。你需要的是将className指定为这样的字符串：

import './login.css';    
<Button id="your-id" type="primary" htmlType="submit" className="your-class-name">
    Log in
</Button>

如果Button不是组件，则应该是“button”而不是

import './login.css';    
<button id="your-id" type="primary" htmlType="submit" className="your-class-name">
    Log in
</button>

如果你想要的是使用“内联样式”，你必须将样式声明为混合，如下所示：

var styles =  {
    someStyle: { ..props}
}

<button id="your-id" type="primary" htmlType="submit" style={styles.someStyle}>
    Log in
</button>

在ant设计中加载样式ui用于反应组件

1 个答案: