Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries.

To view the code on codesandbox, please visit HERE

EXPECTED OUTPUT

CODE

const OR = styled.div`
  display: flex;
  flex-direction: row;  
  color: #5C5C5C;
  font-size: 14px;
  &:before, &:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    border-color: #A1A1A1;
    margin: auto;
  }
  &:before {
    margin-right: 10px
  }
  &:after {
    margin-left: 10px
  }
}
`;
cssreactjsstyled-components

Answer №1

Upgrade your OR element in this way


    const OR = styled.div`
      display: flex;
      width:50%; // Include
      flex-direction: row;  
      color: #5C5C5C;
      font-size: 14px;
      margin: auto; // Include
      &:before, &:after {
        content: "";
        flex: 1 1;
        border-bottom: 1px solid;
        border-color: #A1A1A1;
        margin: auto;
      }
      &:before {
        margin-right: 10px
      }
      &:after {
        margin-left: 10px
      }
    }
    `;

Answer №2

Applying max-width to the pseudo elements ::before and ::after

const StyledDiv = styled.div`
  display: flex;
  flex-direction: row;  
  color: #5C5C5C;
  font-size: 14px;
  &:before, &:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    border-color: #A1A1A1;
    margin: auto;
    max-width: 30%;
  }
  &:before {
    margin-right: 10px
  }
  &:after {
    margin-left: 10px
  }
}`

Check out the latest page

Answer №3

 &:before, &:after {
    content: "";
    width:50%;
    height: 2px;
    background-color: #B1B1B1;
    margin: auto;

Replace the border with this code.

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 customization feature in Mui v5 is unable to implement the color specified in the

I have created a custom theme in MUI V5 as shown below: import React from "react"; import { createTheme, Theme } from "@mui/material/styles"; import { brown, red } from "@mui/material/colors"; export const theme = creat ...

reactjsmaterial-ui

Exploring React's componentWillReceiveProps method with the power of Enzym

Today, I am exploring the testing of lifecycle functions such as componentWillReceiveProps using enzyme. In order for my component to function properly, it needs to be styled with materialUi styles and connected with redux. This is essential to avoid any ...

unit-testingreactjsmaterial-uijestjsenzyme

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress

Firefox not rendering responsive YouTube embed properly

This method of embedding seems to be functioning well on all browsers except for Firefox; I took advantage of a free trial at crossbrowsertesting.com to verify. I’m not using a direct iFrame embed, and all the solutions I’ve come across are related to ...

javascriptcsshtmlfirefoxyoutube

What is the best approach for accessing values from dynamic or multiple form fields upon submission in React?

In my form, users have the ability to add Textfields in order to include additional items. However, I am facing a challenge when it comes to retrieving these items from the form upon submission. The Textfields are dynamically created by a component functi ...

javascriptreactjsformsmaterial-uijsx

Add the Load More feature to your Next JS project for enhanced user experience

Utilizing the SWR package along with Next JS, I have successfully retrieved data and displayed it in a table. Now, my goal is to implement a "load more" type of pagination for the listing page. Below is the code snippet: Locations component: import useSW ...

reactjsreact-hooksnext.jsswr

Are you experiencing issues with the cross-origin request failing in react-map-gl?

While setting up a map in react-map-gl and providing my access token, I encountered the following console error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token= ...

javascriptreactjsmapboxreact-map-gl

Enhanced Custom Code Highlighting for Aptana Studio 3 with support for .less files

Looking to enhance syntax highlighting for .less files in Aptana Studio 3 but struggling to find a solution. XText only works with Eclipse, and the forums offer limited guidance. Has anyone successfully implemented custom syntax highlighting for .less fi ...

csssyntax-highlightingaptanalessxtext

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l ...

javascriptcssangularjsng-class

The information stored in Flask sessions is not retained across different sessions

Currently, I am constructing a website using React alongside Python with Flask. An issue has arisen where the session data is being lost between sessions and the cause remains unknown. Within the app.py file in Python, you can find the following app confi ...

pythonreactjsapiflask

Can someone help me transform this LESS code into SCSS?

Currently, I am working on adapting a theme from [www.bootswatch.com][1] that is originally in less format to scss for my rails application. Although I am not well-versed in either SCSS or LESS, I have been researching the variances and have identified so ...

csssassless

What is the best way to reset the state in React Hooks?

Just diving into the world of React, I recently went through this handy guide on hooks. Currently, I have a popover feature with a "Show More" option. The challenge lies in displaying additional text upon click and hiding it when the popover is closed. Th ...

reactjsreact-hooks

utilizing the predefined color scheme in material ui for the theme styling

Is there a way to utilize default theme colors such as "primary" or "secondary" in the sx property without making changes to them? I simply want to do something like sx={{ backgroundColor: "primary" }} ...

reactjsmaterial-ui

What is the best way to select a specific option from an actionsheet in a React Native app?

I am a new React Native learner seeking some guidance. I have created an actionsheet with two options and a cancel option, but I am struggling to figure out how to trigger different actions for each option when pressed. Here's my code snippet: import ...

reactjsreact-nativeactionsheet

Tips for accessing Firebase data to advance your project development

Hey there! I've put together this website using reactjs and firebase. If you're interested in contributing to the project, I'm wondering how someone can access the data stored in my firebase account for development purposes. You can check ou ...

reactjsfirebasegoogle-cloud-firestore

The definition of "regeneratorRuntime" is missing in the rete.js library

After encountering a problem, I managed to find a potential solution. My current challenge involves trying to implement Rete.js in Next.js while using Typescript. The specific error message that's appearing is: regeneratorRuntime is not defined Be ...

reactjstypescriptbabeljsnext.js

The user fails to be redirected following wallet authentication in NextJS

Can someone help me figure out how to redirect the user to the onboard page after successfully connecting to their wallet? Web3Button doesn't seem to be returning anything and I'm stuck. import React, { useEffect } from "react"; import ...

reactjsnext.jsblockchainweb3jsweb3modal

Retrieving a specific data point from the web address

What is the most efficient way to retrieve values from the window.location.href? For instance, consider this sample URL: http://localhost:3000/brand/1/brandCategory/3. The structure of the route remains consistent, with only the numbers varying based on u ...

javascriptreactjstypescript

What does {``} denote in react-native programming?

During my participation in a collaborative project, I noticed that there is a significant amount of {' '} being used. For instance: <Text> {' '} {constant.Messages.PointText.hey} {this._user.first_name || this._user ...

javascriptreactjsreact-native