Changing the border color of material ui Rating stars: A guide

I am struggling to change the border color of stars in Material UI Rating because my background color is black, making it difficult to see when the star is empty!

Here's the code snippet:

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

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    '& > * + *': {
      marginTop: theme.spacing(1),
     
    },
  
  },
 
}));

Within the functional component:

<div className={classes.root}>
                  <Rating name="half-rating-read" defaultValue={finalAverage} precision={0.5} readOnly />
                </div>
cssreactjsmaterial-uireact-functional-component

Answer №1

To display an empty icon with a border, import the StarBorderIcon and incorporate it in your code like this:

import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",

    "& > * + *": {
      marginTop: theme.spacing(1)
    }
  },
  emptyStar: {
    color: "white"
  }
}));
const Star = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Rating
        name="half-rating-read"
        defaultValue={3.5}
        precision={0.5}
        readOnly
        emptyIcon={
          <StarBorderIcon fontSize="inherit" className={classes.emptyStar} />
        }
      />
    </div>
  );
};
export default Star;

https://codesandbox.io/s/friendly-framework-uyfj9?fontsize=14&hidenavigation=1&theme=dark

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

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Is it possible for me to develop a unique NPM package for a custom component library using Material UI as a

I am interested in utilizing MaterialUI as the foundational package (@material-ui/core), customizing components to align with my brand and style guidelines, and creating my own component library as an NPM package. This involves customizing @material-ui/cor ...

reactjsnpmmaterial-ui

Having trouble with routing nesting in react-router v4?

I find myself in the following situation: <Wrapper> <Container> <Route exact path="/" component={UserListing} /> <Route path="/user/:id" component={UserDetails} /> <Route exact path="(/|/user/\d+)" comp ...

javascriptreactjsreact-routerreact-router-v4

Hide popup in React Semantic UI when clicking on a different popup

I've integrated React Semantic UI into my application and I'm using the semantic Popup component to display tooltips. One issue I'm encountering is that when I click on a popup button, previously opened popups are not automatically closing. ...

javascriptreactjssemantic-ui-react

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

htmlcssangulartypescript

Utilizing an arrow function enclosed within curly brackets to manage React context

During a React context tutorial, I came across this code snippet: <MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer> This part, value => /* render something based on the context valu ...

reactjsarrow-functionsreact-context

Using React MUI to implement a custom Theme attribute within a component

I have a CircularProgress element that I want to center, and to make the styling reusable, I decided to create a theme.d.ts file: import { Theme, ThemeOptions } from '@mui/material/styles' declare module '@mui/material/styles' { inte ...

reactjstypescriptmaterial-ui

Dynamically incorporate images into your Create-React-App

Seeking assistance with a React problem. In my journey of learning React, I am attempting to dynamically display images from an object called "project". By looping through the "projects" and passing each item as props to a component named "Project", I ca ...

reactjsimageobjectwebpackcomponents

Color picker can be utilized as an HTML input element by following these steps

After trying out various color pickers, I was not satisfied with their performance until I stumbled upon Spectrum - The No Hassle jQuery Colorpicker. It perfectly met my requirements. <html> <head> <meta http-equiv="content-type" content="t ...

javascriptphpjqueryhtmlcss

Constantly refreshing MUI Paper components

I am currently in the process of developing a fitness app that includes a timer. I have chosen to use MUI for this project. However, I've encountered an issue that is causing my app to break. Whenever I incorporate the Paper components or any Item bas ...

reactjsmaterial-ui

Experimenting with iron-session and its `withIronSessionSsr` function that interacts with the `context` feature in NextJs, React, and

Within my NextJs utility file, there is a function that imports another utility function. This imported function takes a handler as an argument, which then utilizes context. import { ironSessionUtil } from './anotherUtil' const checker = () => ...

reactjsnext.jsts-jest

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

How can I combine a Next.js Link with MUI's Pagination component?

I am currently utilizing Next.js along with the MUI design system in my project. One of the components includes a table with multiple pages and utilizes the Pagination component from MUI to navigate through different pages within the table. Currently, I am ...

next.jsmaterial-uipagination

Is it possible to incorporate half an image into a slideshow using html and css?

Hello, I need help modifying this code: <div> <div style="width:100%"> <img src="images/o.jpg" alt="" style="width:100px;height:100px;justify-content: center;padding-left:50%" /> </div> <div id="flipbook"> ...

jqueryhtmlcss

Including material-ui/core/Table produces a data error before it has even been connected

My Initial Redux Saga Setup In my Redux Saga code, I have a generator function that fetches data from a mock API: function* fetchPickingScans({orderReference}){ try{ const response = yield call( scanningMockApi.getPickingScans, orderReference ...

javascriptreactjsreduxmaterial-uiredux-saga

Identify Horizontal Swipe Gestures on Page-level

I am currently focused on ensuring accessibility for users utilizing voiceover technology. While navigating their phone, these individuals rely on right and left swipes to interact with elements on a page. I am seeking to implement swipe detection at the ...

javascripthtmlreactjsaccessibilitywai-aria

Learn how to extract information from a MongoDB database and display it on a live webpage with the help of Node.js, React.js

Here is the data I obtained after running a query on the mongo terminal: db.contacts.find(); [ { _id: 59097d937386cc3a4e7b766b, name: 'Oreo', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca3bea9a38ca ...

node.jsmongodbreactjsexpressmongoose

Does Less undergo a compilation process in a single pass?

Does Less execute a single pass on the files, or does it perform multiple passes? I am particularly worried about what will happen if I include another file that redefines variables and mixins. Will the generated output use the original values, or will it ...

cssless

Saving data in MongoDB for future use in a variable

Every 24 hours, my code retrieves and inserts information from a 3rd party API. The data includes ID, Name, Status, Position, Score. Only the information related to Name, Status, Position, Score can be updated if changes occur, while the ID remains constan ...

node.jsreactjsmongodb

Prevent scrolling in a full-screen modal using CSS

I came across a beautiful fullscreen modal that is purely based on CSS. The only issue I encountered was that the modal isn't scrollable. I attempted various solutions but haven't been successful. Here's the script I am using: ...

htmlcssmodal-dialog