Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer:

import Typography from '@material-ui/core/Typography';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

export default function App() {
  return (

    <Container >
          <Header></Header>
        <Typography variant="h4" component="h1" gutterBottom style={{color: 'white'}}>
          Instaride Web App
        </Typography>
        <Copyright />
      <Footer></Footer>
    </Container>
  );
}

However, I am having trouble changing the text color to white. How can I modify this default function? Whenever I attempt to alter any of the colors, an error stating:

No overload matches this call.
javascripthtmlcssreactjsmaterial-ui

Answer №1

As per the documentation provided by Material UI available here, the color property only accepts certain specified values.

https://i.sstatic.net/Z27Av.png

So, what's next?

You have the option to utilize classes to customize the default CSS behavior

<Typography variant="body2" color="textSecondary" align="center" classes={{root: 'some-class-name'}}>

Then in your CSS file:

.some-class-name {
  color: black;
}

Answer №2

Learn how to implement MUI styling in your project,

import React from "react";
import ReactDOM from "react-dom";
import { Container, Typography, Link } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  bg: {
    backgroundColor: "grey"
  },
  copyright: {
    color: "white"
  }
});

function App() {
  const classes = useStyles();

  function Copyright() {
    return (
      <Typography
        className={classes.copyright}
        variant="body2"
        color="textSecondary"
        align="center"
      >
        {"Copyright © "}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }

  return (
    <Container className={classes.bg}>
      <Typography variant="h4" component="h1" gutterBottom>
        Instaride Web App
      </Typography>
      <Copyright />
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Check out a live example on CodeSandbox: https://codesandbox.io/s/bold-haze-kbt0h?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

Implement lazy loading functionality in Django to dynamically load data as the user scrolls

Currently, I am developing a web application using Django to showcase the interface and how content is loaded. In my database, there could potentially be thousands of entries, and I am looking for a way to load only a certain number at a time to minimize ...

javascriptpythonajaxdjango

Switching Visibility of Map Layers through an External Component

Let me start by mentioning that I am a design student utilizing Vue.js for prototyping my senior project. This is merely a prototype of a diary app and not an actual working project. The issue at hand involves a map component created with Vue2Leaflet, whi ...

javascriptvue.jsvuejs2leaflet

The styling applied through the MUI TextField sx props does not take effect

Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...

htmlcssreactjsmaterial-uijsx

Is there a way to change or delete this inline javascript using Greasemonkey?

I stumbled upon this script within the head of a website: <script type="text/javascript" > function Ext_Detect_NotInstalled(ExtName,ExtID) { } function Ext_Detect_Installed(ExtName,ExtID) { alert("We have detected an unauthorized extension. Pl ...

javascriptgreasemonkey

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

Ember.js - The Veggie Power-Up: [object Object] encountered an error with:

I've recently started using ember and have set up a sandbox to experiment with it. An interesting issue arises when I run the ember s command - an error pops up, but here's the strange part: the error only occurs when I have Sublime Text open (!? ...

javascriptember.jsnpmbroccolijs

Implement ES6 classes for managing state in the vuex store within a Nuxt application

After setting an ES6 class to the state in my vuex store in nuxt, I encountered the following warning: WARN Cannot stringify arbitrary non-POJOs EndPoint However, when I use an object as the state, it works without any warnings. So the question arises ...

javascriptvue.jsvuexnuxt.jses6-class

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

htmlcss

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

cssangularangular2-bootstrapping

Trouble displaying AngularJS $scope.data in the HTML code

I'm experiencing an issue where the data received from a POST request is being logged in the console, but is not displaying on the HTML page. Despite having a controller set up, the {{user}} variable is not appearing on the HTML page. While I can se ...

javascripthtmlangularjs

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

javascripthtmlcssmedia-queriessidebar

Loading information in a directive by utilizing promises in a service with AngularJS

Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...

javascripthtmlangularjsservice

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

javascriptjqueryhtmlajaxforms

Encountered a problem in Node.js when attempting to generate a CSV file using Bot Framework

I am currently working on a chatbot project using the Microsoft Bot Framework with Node Js. My goal is to provide the user with a CSV file upon request. However, I have encountered an issue with the format of the downloaded file 'prova.csv' not ...

javascriptnode.jsfunctioncsvbotframework

Generate an interactive pie chart with visually appealing animations using jQuery, without any actual data

My task involves creating a pie chart to visually display different categories. However, the challenge is that the chart does not contain any data, ruling out options like Google charts or other data-driven chart makers. As a solution, I have turned the pi ...

javascriptjquerypie-chart

The CSS property input::-webkit-outer-spin-button adjusts the margin-left and is exclusively visible in Chrome browser

Strange things are happening... Let me share the code for my inputs: #sign_in input#submit { height: 56px; background-color: #88b805; font-weight: bold; text-decoration: none; padding: 5px 40px 5px 40px; /* top, right, bottom, left ...

webkitcss

Is there a proper way to supply createContext with a default value object that includes functions?

As I was creating my context, I set an initial state and passed the necessary functions for useContext. Although this method is functional, I'm concerned it may present challenges in larger projects. Does anyone have suggestions for a more efficient a ...

javascriptreactjstypescriptreact-hooksreact-context

How can Cypress tests effectively interact with the React application?

In my current setup, there are four unique Cypress tests identified as test1, test2, and test3. Additionally, one of the tests does not have any specific ID assigned to it. My goal is for the application to trigger three distinct APIs based on the test I ...

reactjstestingnext.jscypress

Navigating Errors within Nested Promises: A Clear Perspective

Struggling with my first node.js backend, I am currently refactoring the login function. However, I seem to be missing something crucial when it comes to promise chaining and error handling. If anyone could help me identify where I'm going wrong, I wo ...

javascriptnode.jspromise

sending axios request, parsing error object to extract validation message

When I send an axios put request, I keep getting a status code 400 error. The server sends a user-friendly validation error message which shows up in the dev tools as https://i.sstatic.net/Pdxsx.png In my catch block, I expect to retrieve the error messa ...

reactjsaxios