Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

Question

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

It's common knowledge that achieving this in CSS is a possibility.

.makeStyles-mainNavWrapper-67.sticky{
  position: fixed;
  top: 0px;
  opacity: 1;
  transition: opacity 1s ease;
  padding: 10px;
}

I am curious to find out if this can be achieved in Material-UI as well, eliminating the need for separate stylesheets (one for the MaterialUI ReactApp and one linked in the HTML tag).

const Header = (props) => {
  const useStyles = makeStyles(theme => ({
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%'
    },
    mainNavWrapper: {
      paddingTop: '2%',
      background: 'rgba(0,0,0,0.8)'
    },
    mainNavWrapper.sticky: {
       I've attempted to combine two classes in MaterialUI with no success. Is there a way to accomplish this?
    },

My attempt at concatenating two classes in MaterialUI resulted in errors.

javascript css reactjs material-ui

Answer 1

Answer №1

After much searching, I finally discovered the solution. By importing the react-jss package and carefully following their documentation, I was able to unlock the power of jssNested syntax. This allowed me to access nested elements and define rules that only activate when two specific classes are attached to an element.

Here is the implementation:

import React from 'react'
import { render } from 'react-dom'
// Import React-JSS
import injectSheet from 'react-jss'

// Define Styles using JSS format
const styles = {
  mainNav: {
    // Main Navigation styles here
  },
  li: {
    // List item styles here
  },
  mainNavWrapper: {
    // Main Navigation Wrapper styles here
  },
  myLabel: {
    // Label styles here
  }
}

// Create a component Button using the defined styles and pass it the 'classes' prop.
const Button = ({ classes, children }) => (
  <div className={classes.mainNavWrapper}>

    <nav className={classes.mainNav}>
      <ul className={classes.ul}>
        // List items with applied classes and links here
      </ul>
    </nav>
  </div>
)

// Inject the stylesheet into the component for styling
const Test = injectSheet(styles)(Button)

export default Test;

Answer 2

After much searching, I finally discovered the solution. By importing the react-jss package and carefully following their documentation, I was able to unlock the power of jssNested syntax. This allowed me to access nested elements and define rules that only activate when two specific classes are attached to an element.

Here is the implementation:

import React from 'react'
import { render } from 'react-dom'
// Import React-JSS
import injectSheet from 'react-jss'

// Define Styles using JSS format
const styles = {
  mainNav: {
    // Main Navigation styles here
  },
  li: {
    // List item styles here
  },
  mainNavWrapper: {
    // Main Navigation Wrapper styles here
  },
  myLabel: {
    // Label styles here
  }
}

// Create a component Button using the defined styles and pass it the 'classes' prop.
const Button = ({ classes, children }) => (
  <div className={classes.mainNavWrapper}>

    <nav className={classes.mainNav}>
      <ul className={classes.ul}>
        // List items with applied classes and links here
      </ul>
    </nav>
  </div>
)

// Inject the stylesheet into the component for styling
const Test = injectSheet(styles)(Button)

export default Test;

Answer 3

Answer №2

I believe I may have stumbled upon the solution after some thorough rubberducking.

https://github.com/cssinjs/jss-nested

const styles = {
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // Including a global .clear class in the container.
    '&.clear': {
      clear: 'both'
    },
    // Referring to a global .button within the container.
    '& .button': {
      background: 'red'
    },
    // Utilizing multiple container references in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
}

translates to:

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

Some of my other code is currently not functioning properly so it will require some time to validate this.

Answer 4

I believe I may have stumbled upon the solution after some thorough rubberducking.

https://github.com/cssinjs/jss-nested

const styles = {
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // Including a global .clear class in the container.
    '&.clear': {
      clear: 'both'
    },
    // Referring to a global .button within the container.
    '& .button': {
      background: 'red'
    },
    // Utilizing multiple container references in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
}

translates to:

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

Some of my other code is currently not functioning properly so it will require some time to validate this.

Answer 5

Answer №3

I decided to keep the previous answer because it demonstrates how to resolve this problem using react-jss. The same solution can be achieved with makeStyles in MaterialUI. It seems like there was a syntax error somewhere that prevented my css rules from taking effect.

Here is the code using makeStyles, with some breakpoint code included:

import { makeStyles } from '@material-ui/core/styles';

const Header = () => {

  const useStyles = makeStyles(theme => ({
    root: {
      padding: theme.spacing(1),
      [theme.breakpoints.down('sm')]: {
        backgroundColor: 'red',
      },
      [theme.breakpoints.up('md')]: {
        backgroundColor: 'blue',
      },
      [theme.breakpoints.up('lg')]: {
        backgroundColor: 'green',
      },
    },
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%',
      '& ul': {
        zIndex: '2',
        textAlign: 'right',
        listStyleType: 'none',
        margin: '0px',
      }
    },
    li: {
      display: 'inline-block',
      marginLeft: '3%',
      '& a': {
        color: 'white',
        textDecoration: 'none',
        marginRight: '10px',
        padding: '10px',
        '&:hover': {
          background: '#3498db'
        }
      }
    },
    mainNavWrapper: {
      background: 'rgba(0,0,0,1)',
      width: '100%',
      opacity: '1',
      transition: 'width 2s ease',
      padding: '10px',
      position: 'fixed',
      zIndex: 1,
      '& .sticky': {
        position: 'fixed',
        top: '0px',
        opacity: '1',
        transition: 'opacity 2s ease',
        padding: '10px',
        zIndex: 1
      },
      '& .scrolling': {
        opacity: '0',
        position: 'fixed',
        transition: 'opacity 30ms ease'
      }
    },
...
inside the functional component's return ():
 <div className={classes.root}>

      <div className={classes.mainNavWrapper}>

        <nav className={classes.mainNav}>
          <ul className={classes.ul}>
            <li className={classes.li}><a href="#" >home</a></li>
            <li className={classes.li}><a href="#">about us</a></li>
            <li className={classes.li}><a href="#">packages</a></li>
            <li className={classes.li}><a href="#">reviews</a></li>
            <li className={classes.li}><a href="#" className={classes.current}>contact us</a></li>
          </ul>
        </nav>

      </div>
</div>

Answer 6

I decided to keep the previous answer because it demonstrates how to resolve this problem using react-jss. The same solution can be achieved with makeStyles in MaterialUI. It seems like there was a syntax error somewhere that prevented my css rules from taking effect.

Here is the code using makeStyles, with some breakpoint code included:

import { makeStyles } from '@material-ui/core/styles';

const Header = () => {

  const useStyles = makeStyles(theme => ({
    root: {
      padding: theme.spacing(1),
      [theme.breakpoints.down('sm')]: {
        backgroundColor: 'red',
      },
      [theme.breakpoints.up('md')]: {
        backgroundColor: 'blue',
      },
      [theme.breakpoints.up('lg')]: {
        backgroundColor: 'green',
      },
    },
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%',
      '& ul': {
        zIndex: '2',
        textAlign: 'right',
        listStyleType: 'none',
        margin: '0px',
      }
    },
    li: {
      display: 'inline-block',
      marginLeft: '3%',
      '& a': {
        color: 'white',
        textDecoration: 'none',
        marginRight: '10px',
        padding: '10px',
        '&:hover': {
          background: '#3498db'
        }
      }
    },
    mainNavWrapper: {
      background: 'rgba(0,0,0,1)',
      width: '100%',
      opacity: '1',
      transition: 'width 2s ease',
      padding: '10px',
      position: 'fixed',
      zIndex: 1,
      '& .sticky': {
        position: 'fixed',
        top: '0px',
        opacity: '1',
        transition: 'opacity 2s ease',
        padding: '10px',
        zIndex: 1
      },
      '& .scrolling': {
        opacity: '0',
        position: 'fixed',
        transition: 'opacity 30ms ease'
      }
    },
...
inside the functional component's return ():
 <div className={classes.root}>

      <div className={classes.mainNavWrapper}>

        <nav className={classes.mainNav}>
          <ul className={classes.ul}>
            <li className={classes.li}><a href="#" >home</a></li>
            <li className={classes.li}><a href="#">about us</a></li>
            <li className={classes.li}><a href="#">packages</a></li>
            <li className={classes.li}><a href="#">reviews</a></li>
            <li className={classes.li}><a href="#" className={classes.current}>contact us</a></li>
          </ul>
        </nav>

      </div>
</div>

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery to access the ID of a div and create a custom close button

In a jQuery project, WebStorm marks all $-operators as "unrecognized."

The state in Reactjs is not displaying as expected

Express js is unable to retrieve the page at /page

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

When the dependencies change, useEffect is not triggered

Changes to the theme state will only trigger a single rerender within the ThemeProvider

What specific width range would be best for my needs?

Guide on keeping your MongoDB collection up-to-date with Mongoose

Script tag for Next.js reloading functionality

Validation for dates in Angular.Js input is important to ensure that only

Personalized scrollbar extends beyond the screen

Display unique information according to the value in the form field (email domain)

React application is experiencing issues with environment variables

Executing javascript after an AJAX call within an on() method: Tips and tricks

Issue with page break functionality during print preview

The offcanvas close button fails to function if initialized through JavaScript

Adding additional properties to Material UI shadows in Typescript is a simple process that can enhance the visual

Issue with installing node-sass via npm install and node-gyp

Guide on integrating msw with Next.js version 13.2.1 (Issue: Unable to access worker.start on the server)