时间戳

首页 > 解决方案 > 反应未将 className 样式应用于按钮

reactjs - 反应未将 className 样式应用于按钮

问题描述

我从 React 开始，只是想设计一个按钮的样式。虽然它忽略了样式。我不确定我是否遗漏了一个包裹，或者我是否做错了一些相当简单的事情。

我的 App.js 文件

import React from 'react';
import Transactions from './Components/Transactions';

const App = props => {
  return (
  <div><Transactions /></div>
  );
}

export default App;

我的 Transactions.js 文件

import React from 'react';
import Button from '../button/button';

const Transactions = (props) => {
    return (
        <Button caption='blah'></Button>
    );
};

export default Transactions;

我的 button.js 文件

import React from 'react';
import classes from './button.css';


const button = (props) => (
    <button
        className={classes.Button}>{props.caption}
    </button>
);

export default button;

我的 button.css 文件（button.js 和 button.css 都在 src 下的 button 文件夹中）

.Button {
    font-size: 24pt;
    background-color: purple;
    color: white;
    width: 150px;
    border-radius: 8px;
}

编辑 1 虽然我可以通过在 button.js 文件中进行以下修改来使其工作，但我寻求使用 CSS 模块方法。我使用 create-react-app 来创建应用程序，但认为我一定遗漏了其他东西。我需要弹出应用程序吗？我是否缺少导入库？

import React from 'react';
import './button.css';


const button = (props) => (
    <button
        className={"Button"}>{props.caption}
    </button>
);

export default button;

标签： reactjs

解决方案

我认为这是在您的导入和文件名上。CSS 模块遵循{component}.module.css命名约定。所以，你可以试试：

  1. 重命名button.css为button.module.css
  2. import styles from './button.module.css
  3. styles.Button在您的班级名称中使用

请参阅：CSS 模块

推荐阅读