automating the styling of elements

Hey everyone, I have a specific element that I want to conditionally apply multiple styles to.

Initially, I approached it like this:

    <Text
        style={[
          discountCodeState === '' || !isActiveHandler(value)
            ? [
                style.submitText,
                isActiveHandler(value) ? style.submitTextActive : null,
              ]
            : discountCodeState === 'success'
            ? [style.submitText, style.submitTextSuccess]
            : [style.submitText, style.submitTextError],
        ]}
      >
        {submitText}
      </Text>

While this method was effective, it contained quite a bit of repetitive code. Therefore, I revised it to the following:

   <Text
        style={[
          style.submitText,
          discountCodeState === '' && isActiveHandler(value)
            ? style.submitTextActive :
             discountCodeState === 'success'
            ?  style.submitTextSuccess
            :  style.submitTextError,
        ]}
      >
        {submitText}
      </Text>

Unfortunately, I encountered an issue where style.submitText seemed to disappear unexpectedly. I am unsure of the reason behind this. Any insights would be greatly appreciated.

Thank you!

Answer №1

If style fields exist in both style.submitText and the other three styles, they will be overridden by the other three styles. When the same style fields are included in a style array, the last field will take precedence.

For example:

const styles = StyleSheet.create({
  style1: {
    backgroundColor: 'blue',
    width: '100%',
    height: '50%',
    ...
  },
  style2: {
    backgroundColor: 'red',
    width: '50%',
    ...
  },
  style3: {
    backgroundColor: 'green',
    ...
  },
});

<View style={[styles.style1, styles.style2, styles.style3]}/>

Your view's style will be:

{
    backgroundColor: 'green',
    width: '50%',
    height: '50%',
}

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

Error: The function bind is not supported on instance[method] in the AdonisJs framework

I am currently integrating the MQTT-adonis module adonis-mqtt response on Git here in my adonis-js application. However, when trying to serve it, an exception is thrown. TypeError: instance[method].bind is not a function Could anyone provide guidance o ...

Tips for effectively handling sessions with a complex database system

Having a single user portal account, I access it with two distinct usernames in separate tabs. Performing a hard refresh (ctl+f5) simultaneously in both tabs results in the same user account opening in both tabs, regardless of which username I use. How ca ...

Is it possible for CSS3 transitions to handle multiple tasks simultaneously? Let's experiment with Fiddle and find out

I am attempting to create a simple effect: The div contains an image and text with a background of RGBA(255,255,255,0.5). Upon hovering over the element, I want the image to decrease opacity and the background behind the text to disappear in a seamless t ...

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 ...

JavaScript, keep it easy: globalize

Looking for help with a simple regex expression... document.getElementById('testing').value=f2.innerHTML.replace(">",">\n"); I'm having an issue where it only stops after the first line break. How can I make it work for the enti ...

Is it possible to manipulate CSS on a webpage using javascript?

I have incorporated this piece of JavaScript to integrate a chat box onto my website: window.HFCHAT_CONFIG = { EMBED_TOKEN: "XXXXX", ACCESS_TOKEN: "XXXXX", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://XXXXX.cloudfront.ne ...

Variability of pixel dimensions on various devices

When it comes to front-end design in CSS, the use of pixels as a measurement is quite common. However, with varying display sizes and resolutions, one might wonder how relevant this fixed pixel size really is. Is there a way to utilize real-world measure ...

Setting a new state versus modifying the existing state by using setState have distinct nuances

I’m currently struggling with updating the value of a specific key in the state of my component. The state is structured as follows: this.state = { stateValue1: false, stateValue2: false, stateValue3: false }; To update the ...

Having trouble transferring ASP server control value to a Javascript function

Currently working with ASP.NET 2.0. My Entry Form contains various ASP.NET Server Controls, such as TextBoxes. I want to pass the value of a TextBox on the onBlur event. Here is an example of a TextBox code: <asp:TextBox ID="txtTotalTw" Width="80px" r ...

Help with guiding and redirecting links

Here's the code snippet: <script> if(document.location.href.indexOf('https://thedomain.com/collections/all?sort_by=best-selling') > -1) { document.location.href = 'https://thedomain.com/pages/bestsellers'; } </script& ...

Is there a way to conceal the article container?

My experience with javascript and Mapbox is still limited, so please bear with me. I am currently working on a map that showcases various restaurants in NYC and their impact during the recession. Additionally, I am trying to include small columns for artic ...

Traverse a tree structure of nested child objects in an Angular template using a JavaScript

Check out the Javascript object below: { "id": "1554038371930_ajhnms9ft", "name": "CPS", "nodes": [ { "id": "1554038905938_le34li2cg", "name": "Consumer Journey", "nodes": [ { ...

Continuously executing a series of JQuery functions or iterating through them repeatedly

Struggling with a jQuery animation loop issue that has me stuck. I need the animation to repeat continuously, but it's not working despite trying setInterval. Can anyone assist? Here's the fiddle link: https://jsfiddle.net/8v5feL9u/ $(document). ...

What is the best way to turn my thumbnail into a clickable link while having the title positioned to the right?

Is there a way to create a thumbnail that acts as a link and position the title next to the thumbnail? I have experimented with using 'after' and modifying the HTML structure to align them horizontally. Any ideas on how I can achieve this layou ...

Tips for resolving this unhandled error in React TypeScript

After creating a program in React TypeScript, I encountered an uncaught error. Despite running and debugging tests and conducting extensive research on Google, I have been unable to resolve this issue on my own. Therefore, I am reaching out for assistance ...

Issue #98123 encountered during execution of `npm run develop` command, related to WEBPACK

I want to start a brand new Gatsby site following the instructions provided on . Here's what I did: npm init gatsby # see note below cd my-gatsby-site npm run develop Note: I didn't make any changes to the configuration, so I'm using JavaS ...

Error: The document has not been defined - experimenting with vitest

I'm currently working on a Vite project using the React framework. I have written some test cases for my app using Vitest, but when I run the tests, I encounter the following error: FAIL tests/Reservations.test.jsx > Reservations Component > d ...

The field "addWorkout" cannot be queried on the type "Mutation"

My journey with GraphQL has just begun, and after resolving a reference error in my previous question, I have encountered a new challenge. It appears that adding a workout is not working as expected, as the schema does not recognize it as a mutation field. ...

Is it possible to sort an array by both date and time simultaneously?

As I work on developing a schedule app, it is necessary to sort items by both date and time simultaneously. In the current setup, the filtering only considers hours and minutes which is functional, but there is a need to also include dates in the sorting p ...

What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains? <div class="wrapper"> <div class="element" /> </div> or... <div class="wrapper"> <div class="element" /> <div class="el ...