CODEWITHSUNDEEP
htmlcssreactjs
Anamaria Afanasov
Anamaria Afanasov

Reputation: 45

css properties are not applied

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?

Upvotes: 0

Views: 105

Answers (2)

Nithish
Nithish

Reputation: 5999

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.

Upvotes: 1

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

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>

Upvotes: 1

Related Questions