Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here.

const MyBlueButton = props => {
  const styles = { background: 'blue', color: 'white' };  
  return <button {...props} style={styles} />;
};

However, I also want to incorporate some styles from stateful components as explained here.

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

The issue arises when trying to apply these styles using:

<div className={classes.root}>

This results in an error message stating:

'classes' is not defined no-undef

How can I access the withStyles classes object to properly style the root element?

cssreactjsmaterial-uijsx

Answer №1

In case I have interpreted correctly, here is a way to achieve this using a functional component.

const customStyles = theme => ( {
  mainContainer: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
} );

const MyComponent = ( props ) => {
  const { classes } = props;
  return <div className={classes.mainContainer}>Hello World</div>;
};

export default withStyles( customStyles )( MyComponent );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

javascripthtmlcss

React Timer App: The setInterval function is being reset after each render operation

I'm currently working on a straightforward timer application that will begin counting seconds when a button is clicked. To implement this, I am utilizing react hooks. import React, { useState } from 'react' function Timer() { const [sec ...

javascriptreactjs

Creating additional pages

Recently starting with Next js, I decided to create a new page. First step was creating a folder named pages inside of src/app. Inside this folder, I added a file called dashboard.tsx. However, when attempting to access the page via http://localhost:3000/d ...

reactjsnext.js

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

I'm currently using react chart js for displaying a doughnut in my component. "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0", However, I'm facing an issue where the title is not being displayed: const d ...

javascriptreactjschart.jsjsx

The data remains stagnant even after employing the onDataChange function in react native following the integration of a reusable component

My reusable Text input component is not working properly for validation. I am unable to retrieve the input value as it always shows null. This is how I am retrieving the username and password: <LoginTextBox placeholderName='Email& ...

javascriptreactjsreact-nativejsx

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

Creating a line with CSS is a straightforward process that involves using properties

I am trying to achieve a yellow line effect similar to the image shown using CSS. I have managed to create line holes so far, but I'm struggling with creating vertical straight lines. Here is an example of my current code: Below is my code snippet: # ...

htmlcss

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

Differences Between Put and Post in Node.js

I am currently exploring NODEJS in conjunction with react. In a typical scenario, the request to edit posts would look like this: router.put("/:id", function(req, res) { Campground.findByIdAndUpdate(req.params.id, req.body.campground, function( e ...

node.jsreactjsexpress

In the context of Express, how are "static" and "non-static" defined?

The Express documentation explains that the express.static() middleware is used to serve static files like images, CSS, and JavaScript. However, when serving a front-end React app using express.static("some_build_dir"), which includes JS files ...

javascriptnode.jsreactjsexpressmiddleware

When attempting to access the user information using the Axios library in a React application, a 400 error (Bad Request) occurred for

Currently, I am working on a project using the MERN stack. My goal is to display a single user's data on their own dedicated page. The route functions correctly on the server-side in Postman as I can successfully retrieve the user by their ID. However ...

node.jsreactjsexpresshttpaxios

Utilizing the onBlur event to control focus within a React element

In the React component I'm working on, I have implemented an onBlur event handler. The logic inside this handler is supposed to return focus back to the target element. This code is written in TypeScript. emailBlur(e: React.FocusEvent<HTMLInputEle ...

reactjstypescriptevent-handlingonbluronfocus

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

Encountering a "List.name='List' error" during the Gatsby build process

https://i.sstatic.net/0elLW.png I have been experiencing constant failure with gatsby build on this specific line List.name='List' related to reactstrap. Despite trying various solutions, I have not been able to resolve the issue. - reactstrap ...

reactjsgatsbybootstrap-5netlifyreactstrap

The values being utilized in my React app are coming from the .env file instead of the .env.local file

The dotenv module is not prioritizing my .env.local file over my .env file as expected. Despite having the same environment variable, REACT_APP_API_BASE, defined in both files, the app consistently uses the value from .env. It only switches to using the va ...

reactjscreate-react-appdotenvcraco

Utilizing React Refs to Retrieve Value from HTML Select Element

I am currently working on a form that includes the use of an HTML select element. <select className="form-control" id="ntype" required > <option value = "">None</option> <option value = "1">1</option> < ...

javascripthtmlreactjs

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

Crafting an innovative horizontal CSS spotlight using conic-gradient styling

Seeking advice: I need to implement three spotlights on a webpage One shining directly downwards One angled from the left to the upper-top One angled from the right to the upper-top I managed to create a vertical spotlight using CSS conic-gradient, but I ...

htmlcsslinear-gradientsconic-gradients

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

csssvg

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss