0

I'm learning pwa studio how to code

here is the code:

/* src/components/GreetingPage/greetingPage.js */

import React from "react";
import { useParams } from "react-router-dom";
import { string, number, shape } from 'prop-types';
import {Form} from "informed";
//import classes from "../../overwrites/components/gallery/test.css";
import Field from "../../../../venia-ui/lib/components/Field";
import TextInput from "../../../../venia-ui/lib/components/TextInput";
import defaultClasses from "./greetingPage.css";
import {useStyle} from "@magento/venia-ui/lib/classify";

const hi = {
    textAlign: "center",
    margin: "1rem",
};
const wave = {
    ...hi,
    fontSize: "5rem",
};

const GreetingPage = props => {
    const { who = "nobody" } = useParams();
    const classes = useStyle(defaultClasses, props.classes);
    return (
        <div>
            <h1 style={hi}>Hello, {who}!</h1>
            <h1 style={wave}>{"\uD83D\uDC4B"}</h1>

            <Form
                initialValues=""
            >
                <div>
                    <Field
                        id="lastname"

                    >
                        <div>
                            <label className={classes.inputCss}>Last Name:</label>
                            <TextInput
                                field="lastname"
                                className={classes.inputCss}
                            />
                        </div>
                    </Field>
                </div>
            </Form>
        </div>

    );
};

export default GreetingPage;

/src/components/GreetingPage/greetingPage.css/

.labelCss {
    float: left;
    color: red;
}

.inputCss {
    float: left;
    color: red;
}

the above code didn't work, the class name not adding in the tag in frontend, do anyone know how to do that?

1
  • className='inputCss' work now, but i don't understand why can't use like className={classes.inputCss}
    – hkguile
    May 18, 2022 at 3:58

2 Answers 2

0

You can try the below example for your reference.

/src/lib/components/Button/button.js

import React, { useRef } from 'react';
import { useButton } from 'react-aria';
import { oneOf, shape, string, bool } from 'prop-types';

import { useStyle } from '@magento/venia-ui/lib/classify';
import defaultClasses from './button.module.css';

const getRootClassName = (priority, negative) =>
    `root_${priority}Priority${negative ? 'Negative' : ''}`;

/**
 * A component for buttons.
 *
 * @typedef Button
 * @kind functional component
 *
 * @param {props} props React component props
 *
 * @returns {React.Element} A React component that displays a single button.
 */
const Button = props => {
    const {
        children,
        classes: propClasses,
        priority,
        negative,
        disabled,
        onPress,
        ...restProps
    } = props;

    const buttonRef = useRef();

    const { buttonProps } = useButton(
        {
            isDisabled: disabled,
            onPress,
            ...restProps
        },
        buttonRef
    );

    const classes = useStyle(defaultClasses, propClasses); // here add your class variable 
    const rootClassName = classes[getRootClassName(priority, negative)];

    return (
        <button
            ref={buttonRef}
            className={rootClassName}
            {...buttonProps}
            {...restProps}
        >
            <span className={classes.content}>{children}</span> <!-- use class variable -->
        </button>
    );
};

/src/lib/components/Button/button.module.css

.content {
    margin: 0;
    align-items: center;
    display: inline-grid;
    gap: 0.35rem;
    grid-auto-flow: column;
    justify-content: center;
    justify-items: center;
}
0

In your code, you can rename your CSS file name like greetingPage.css to greetingPage.module.css and call your CSS into your src/components/GreetingPage/greetingPage.js file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.