When attempting to print using React, inline styles may not be effective

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}>

The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode.

Substituting 'blue' for color[index] successfully changes the color in the web browser, but does not reflect in the print preview.

It seems like inline styles do not function properly in print. Since I need to dynamically generate the color, I cannot just rely on a static color defined in a CSS file.

Has anyone encountered this issue before?

View screenshot in Chrome :

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

Print preview mode screenshot:

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

javascripthtmlcssreactjs

Answer №1

To ensure proper printing, consider adding the following @media print rule to your main CSS file:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

If using Chrome, make sure to check the "Background Graphics" checkbox in the print settings.

https://i.sstatic.net/9DjQw.png

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

Headline at the top of the page, perfectly centered with a division below

Trying to create an effect where there is a div that is centered both vertically and horizontally within a dynamic containing div. This can be achieved with the following CSS: #centered-div { vertical-align: middle; margin: auto; } However, I als ...

csshtml

Strategies for refining the names in the dropdown options using AngularJS

I am working with a select element that has a name and id as options value. I am also adding '-' along with the name. However, there is a scenario where the name will be empty and in that case, the '-' should not be displayed. The expe ...

javascriptangularjs

What is the best way to send an array of objects to a Node.js server?

What is the method for sending an array of objects with user data to the server for verification? I am attempting to pass orderform data to a server for validation and then display it on a different page after redirection. const addProductsToServer = (ev ...

javascriptnode.jsexpressserver

Forcing the Empty Table message in jQuery DataTables post an AJAX request

My configuration for jquery-datatables includes a custom search filter that acts as both the standard keyword filter and a specific Item ID search using an ajax call to retrieve a value from the back end, which is then used to search a particular column in ...

javascriptjqueryajaxdatatable

Retrieving dynamic id values from input fields using jQuery

Is there a way to retrieve the values from input fields with changing IDs in a jQuery function? <input type="text" id="a_8" name="a_8" value="12"> <input type="text" id="b_8" name="b_8" value="22"> <button type="button" class="btn btn-suc ...

javascriptjqueryajax

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

javascriptpythonhtmlnpm

Guide to creating "bidirectional data binding" in Vue

I have a child component that is responsible for uploading a photo. The uploaded photo is assigned to the child component's data called "photo". I need to connect the parent data called "file" with the child data called "photo". And whenever "photo" i ...

javascriptvue.jsdata-bindingcomponentsvue-component

Hidden form in JavaScript does not submit upon clicking the text

My previous question was similar to this but with a smaller example. However, the issue with that code differs from my current code. (If you're curious, here's my previous question: JavaScript Text not submitting form) Currently working on my fi ...

javascriptphpjqueryhtmlforms

HTML form variable for running operations

I have created an HTML form that accepts any Linux command as user input. The goal is to execute the command on the server and display the output back to the user. However, I am encountering an issue where I cannot pass the entered command from the textbox ...

htmlforms

Monitor when a button in a grapesjs modal is clicked

When using the Grapesjs Editor, I needed a modal with a form inside it. Upon clicking the submit button, I wanted to trigger a Function that would make an ajax call. To achieve this, I attempted to create a custom component by extending it from the defaul ...

javascriptbootstrap-4bootstrap-modalgrapesjs

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

I am looking to create a Vue async component that stays in a loading state until a custom event is triggered. This means it will render a specified loading component until the event occurs. Here's an example of how I want it to work: const AsyncComp ...

javascriptvue.jsasynchronous

Is there a discrepancy in the value between data and computed properties in Vue components?

Upon reviewing my code, I have noticed that the value shown in the data of the component does not match the desired value. The code snippet is provided below: View.component('xxx-item',{ props:['item'], template:`xxxx`, computed: ...

javascriptvue.jsvue-component

Injecting PHP variables into CSS code right from a PHP file

$a = "ABCD"; ?> <link rel='stylesheet' type='text/css' href='others.php' /> <style> .page-title { text-indent: -9999px; line-height: 0; } .page-title:afte ...

phpcss

Converting the structure of an object into an array structure for highcharts can be achieved through

I am looking to transform the object structure below: [ { "tahun": "2010", "apel": 100, "pisang": 200, "anggur": 300, "nanas": 400, "melon": 500 }, { ...

javascriptajaxdjangohighcharts

Leverage the power of jQuery to merge the values from two input fields into a third input

Currently exploring jQuery and attempting to combine the contents of box one and box two to display them in another input field separated by ||. For instance, if "hello" is entered in the first text box and "you" in the second box, I want to show hello||y ...

jqueryhtmltexthtml-input

Trouble Updating Selected Element in Android 2.3.x

Our team is currently working on a Web application that uses JavaScript to dynamically create elements. While testing for mobile usability, we have encountered an issue with select element behavior on Android devices running 2.3.x versions. When a user tou ...

androidhtmlselect

Accordion styling using CSS

My current issue lies with setting the style for the contents of an accordion. The problem arises when the styles defined in a CSS file do not take effect on the content of my accordion when using the following code along with a separate CSS file: <scr ...

jqueryhtmlcss

Encountering 404 Error in Production with NextJS Dynamic Routes

I'm currently working on a next.js project that includes a dynamic routes page. Rather than fetching projects, I simply import data from a local JSON file. While this setup works well during development, I encounter a 404 error for non-existent pages ...

javascriptreactjsnext.js

Trouble with Fetching JSON Data using AJAX

Having trouble retrieving JSON data from an acronym finder API using a simple GET request. Here is the code I'm using: $.ajax('http://www.nactem.ac.uk/software/acromine/dictionary.py?sf=DOD', { crossDomain:true, dataType: "jsonp ...

javascriptjqueryajaxjson