css properties are not applied - html

Question

I am trying to apply some style to my webpage. In my Festival.module.css
i've got this:
.button {
background-color: purple ;/* Green */
border: none;
color: cblack;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.flightbutton{
background-color : rgb(205, 5, 255);
}
And here is my festival.js file, where i try to apply the style from Festival.module.css file, but it is not working:
import { List, Avatar, Space } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '#ant-design/icons';
import{Link} from 'react-router-dom'
import React from 'react'
import moment from 'moment'
import styles from './Festival.module.css';
const IconText = ({ icon, text }) => (
<Space>
{React.createElement(icon)}
{text}
</Space>
);
const Festivals = (props) => {
return(
<List
itemLayout="vertical"
size="large"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 3,
}}
dataSource={props.data}
renderItem={item => (
<List.Item
key={item.title}
actions={[
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
]}
actions={[
<button key={0} >Accommodation</button> ,
<button className = {styles.flightbutton} key = {1} type="button">Flight</button> ,
]}
extra={
<img
width={272}
alt="logo"
src={item.image_src}
/>
}
>
<List.Item.Meta
title={<a href={`${item.id}`}>{item.name}</a>}
description={moment(item.start_date).format("[The Festival will start on ]MM DD YYYY [at] hh:mm[.\n]").concat(moment(item.end_date).format("[\nThe end day is: ]MM DD YYYY")) }
/>
{item.content}
</List.Item>
)}
/>
)
}
export default Festivals;
Although i applied classname="flightbuton", i don't see any changes in stile of the button. what can i do?

Answer 1

I think you're not applying styles.button to your button element.
You can do something like this:-
<button className = {`${styles.button} ${styles.flightbutton}`} key = {1} type="button">Flight</button>

Answer 2

In your component you can import like below
import './Festival.module.css';
and then just apply the css to the element like
<button className="flightbutton" key = {1} type="button">Flight</button>
Hope this helps.