When incorporating props into styled components, the outcome often turns out to be unexpectedly

I have implemented styled components to change the text color by passing props.

          <Button variant = 'colour' type="submit" form="myForm" className="submit-btn">
            Submit
          </Button>

export const FindFormModal = styled(Modal)`

  .submit-btn {
    width: 35%;
    padding: 12px;
    color:${props => props.variant === 'colour'  ? 'blue' : 'green'}
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 0 10px 0;
  }

`

For some reason, when variant === 'colour', I get green instead of blue. Strangely, if it's not equal to 'colour', then it works as expected displaying blue.

Shouldn't it be the other way around?

cssreactjsnext.jsstyled-components

Answer №1

It is not recommended to use className with styled components in your code.

export const FindFormModal = styled(Modal)`
    width: 35%;
    padding: 12px;
    color:${props => props.variant === 'colour'  ? 'blue' : 'green'};
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 0 10px 0;
`

<Button variant = 'colour' type="submit" form="myForm">
    Submit
</Button>

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

The scroll bar of the Bootstrap modal keeps playing peekaboo every time a new modal is triggered

After trying numerous solutions without success, I am posting this question regarding an issue with the scrolling behavior of Bootstrap modals. Here is the scenario: I have 2 Modals: Modal-1 and Modal-2. When a user is inputting information in Modal-1 ...

htmlcsstwitter-bootstrapmodal-dialogbootstrap-modal

Having trouble getting a styled button to align properly with the text next to it

Usually I wouldn't reach out for help on a minor issue, but I've exhausted all my options. I've spent at least an hour attempting to solve this problem with vertical-align, padding adjustments, and more. It should be a simple fix. http://js ...

css

How can I position 7 images absolutely within a specific div?

I've been working on a website where users can have their avatars displayed using a JS function that loads 7 different images onto the page. These images correspond to different elements such as skin base, hair, eyes, mouth, shirt, shoes, and pants, a ...

javascripthtmlcssimage

how to forward visitors from one URL to another in a Next.js application

I have an existing application that was initially deployed on , but now I want to change the domain to https://example.com. What is the best way to set up redirection for this domain change? I have attempted the following methods: async redirects() { r ...

javascriptnext.js

ReactJS.NET - Element isn't included in the document object model

I'm currently following a guide on ReactJS.NET and hit a roadblock while trying to incorporate the Hello World component (Here). Despite successful compilation with no errors, I am unable to see the component rendered. Below are snippets of the rele ...

asp.netreactjsreactjs.net

Bootstrap 5 NavBar Toggle hamburger Menu not displaying menu items

I attempted to create a navigation bar using the navbar instructions in Bootstrap 5. I included a Toggle hamburger Menu and linked it to the list that should be displayed. However, when I decrease the screen size, the Toggle feature does not function as ex ...

htmlcssnavbarbootstrap-5

Updating a CSS file through jQuery is proving to be ineffective

After searching extensively on Stack Overflow and other websites, I have not been able to find a clear answer to my question regarding changing a CSS class (#navbar a) after a specific function is triggered. My understanding of jQuery and JavaScript is lim ...

jqueryhtmlcss

Make the text within the CSS style of ".well" wrap around the width

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains. What is the best approach to achieve this sizing using CSS? ...

htmlcsstwitter-bootstrap

The onTableChange function in Mui-Datatable does not seem to be functioning properly when attempting to

Utilizing mui-datatable, I came across an official example on codesandbox where setState can be used on the tableState. You can check out the example here: https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js handleTableIn ...

javascriptreactjsmaterial-uimui-datatable

Encountering difficulties installing create-react-app on Windows 10

I've attempted to install create-react-app multiple times without success. Each time I try, it throws an error message saying "Unexpected end of JSON input while parsing..." Even after re-installing Node.js, I'm still encountering the same issue ...

node.jsreactjs

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

Utilizing JSX and Lodash to extract distinct values of object properties into an array

I am currently working on creating an array of distinct values extracted from a collection of objects. Below is the data structure: data: [ { "tags": [ { "name": "tag", ...

arraysreact-nativelodashreactjsjsx

The delay in updating the React state is leading to discrepancies between MUI dialog display and actual information

In my code, there is an onClick handler attached to a button const handleSelectOpen = (noteId) => { let newState = {notes: state.notes, noteDetailScreen: true, activeNote: noteId, newNoteScreen: false, newNoteText: "", newNoteRelated: [] ...

reactjsmaterial-ui

How can the CSP nonce be implemented?

Lately, I've been diving deep into the world of CSP (Content Security Policy), but I've hit a roadblock when it comes to understanding how nonces actually work. My main concern is avoiding the use of "unsafe-inline" for security reasons. From wh ...

reactjshttp-headersgoogle-tag-managercontent-security-policynonce

Ways to correct the stack index on a stacked bar chart

I have a specific expectation for the order of stacks in my chart. I want stack A to always be in the first index, followed by B in the next index, and C should always be the last stack. How can I achieve this? What I currently see: https://i.sstatic.net ...

reactjshighcharts

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

javascriptjquerycssajaxdatatables

Attempting to create a hexagon using 127 divisions results in a gap

I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below: for (i = 1; i <= 127; i++) { var div = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild( ...

css

Using the fs module in a React Native application

Currently, I am facing a challenge in importing TinyDB into an expo project. The issue lies with fs, as Expo does not support it due to its third-party file system nature. I attempted using react-native-fs as an alternative but I am unsure about how to pr ...

javascriptreactjsreact-nativereact-native-fsnode.js-fs

Encountered an error during the installation of the react framework while running the [email protected] script

I am struggling with the installation of the React Theme. The issue arises after I download and extract the theme, and navigate to the root directory to run the command npm install. An error is thrown: The installation script at [email protected] ...

reactjsnpmnpm-install

Injecting variable styles into my VueJS component

I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To ac ...

javascriptcssvue.js