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.

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

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

Cease the audio from playing unless you are actively hovering over the image

Is there a way to make the sound stop playing when you are not actively hovering over the picture? Any suggestions on how to achieve this would be greatly appreciated! imgarr[i].onmouseout=function(){ this.setAttribute('src',this.getAttribu ...

javascripthtmlaudiohovermp3

Adjust the property to be optional or required depending on the condition using a generic type

const controlConfig = >T extends 'input' | 'button'(config: Config<T>): Config<T> => config; interface Config<TYPE extends 'input' | 'button'> { type: TYPE; label: string; ...

javascripttypescript

Exploring the differences between pseudo-elements when styled as display:block versus display:inline

I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...

htmlcss

Utilizing CSS3 to perform multiple 3D rotations

I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...

google-chromecsswebkitwebkit-transform

I'm receiving identical results from findOne even when using different IDs

I am currently working on creating a new array of products based on a list of different Ids. However, I have encountered an issue where the same product is being returned for all Ids when using the findOne() method. let wishpro = ['632a5e5rtybdaaf ...

javascriptnode.jsmongodbexpressmongoose

Automating web pages with the power of Node.js

I have developed an API in PHP that accepts a 10-digit number as a variable and provides data in JSON format. For instance, the URL structure is like this: www.exampletest.com/index.php?number=8000000000. The succeeding variable will be the current number ...

javascriptphpmysqljsonnode.js

Encase the event handler within JQuery

Here's an example of inputs with OnBlur event handlers: <input name="abc" tabIndex="5" class="datetime" onblur="if (CheckMode(this))__doPostBack('abc',''); else return false;" /> Now, in JQuery Form ready function, I want ...

javascriptjquery

Guide to using VueJS for sending a POST request with a JSON array containing data and uploading a File or Picture for each element in the array

I am currently facing a challenge with Axios where I need to send formData from a dynamic Form to PHP. Users should be able to add multiple "persons" along with their respective data and pictures. Below is the format of the data: data: { person:{ ...

javascriptvue.jsvuejs2axios

When working with Angular, the onSubmit method may sometimes encounter an error stating "get(...).value.split is not a function" specifically when dealing with Form

When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...

htmlangularformssplit

Unable to locate the accurate information

Every time I run the cycle, there should be a match with the specified parameters and the message "OK" should appear. However, I am always getting a result of "No". request( { url: 'http://localhost:5000/positions/get', metho ...

javascriptnode.js

Utilize setState to showcase data fetched from AJAX request

Currently, I am in the process of developing a web application using the GitHub search API. My goal is to have detailed information about each repository displayed below its corresponding entry. Specifically, I want the content retrieved from the AJAX re ...

ajaxreactjs

The (.svg) image does not cover the full width of the page

After creating an SVG image, I encountered a problem when trying to display it on a webpage. Even with the width value set to 100%, the image did not stretch all the way to the edges of the page, leaving small gaps at the edges. I attempted to switch the ...

htmlcss

Using a Next.js custom server results in Material-UI being rendered as static content

Currently in the process of developing a NodeJS application using Koa, React, Material-UI, and NextJS. I've come across examples of integrating a server rendering framework with Material-UI. However, these examples assume the use of NextJS' defa ...

node.jsreactjsmaterial-uinext.jskoa

Transforming data from a singular object into an array containing multiple objects with key-value pairs

Looking for assistance with converting data from a single object in JSON format to another format. Here is the initial data: var originalData = { "1": "alpha", "2": "beta", "3": "ceta" } The desired format is as follows: var convertedData = ...

javascriptjson

"Refreshing the page with Next.js version 13.5 by clicking on the link

import Link from "next/link"; import React from "react"; const Navbar = () => { return ( <div> <ul className="flex m-10 gap-10"> <Link href="/"> <li>Home< ...

reactjsnext.jsnext-auth

The Firebase deploy command seems to be sending out an outdated commit for deployment

Whenever I execute firebase deploy in my react application, it seems to deploy older versions of files. Is there a way to make it deploy only the most recent changes that have been committed? ...

reactjsfirebase

Searching for the top 10 documents with the highest value in a specific field using mongoose

I am working with a mongoose model that includes a field called played_frequency. How can I retrieve the first 10 documents from all those available, based on the highest value in the play frequency? Here is the interface of my model: export interface ITr ...

javascriptnode.jsmongodbexpressmongoose

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

javascriptjqueryhtmlcss

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...

htmlcssimageoverlay