Pwa studio adding custom css

Question

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?

• hkguile: className='inputCss' work now, but i don't understand why can't use like className={classes.inputCss}

Answer 1

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;
}

Answer 2

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.