Having trouble aligning the Button component in Material-UI with Styled Components

Just diving into Material UI @ next, and I'm excited about the Styled Components feature.

But struggling with centering the Button component using Styled Components. So far, only able to achieve it using the styles approach like this:

const styles = {
  container: {
    textAlign: "center"
  }
};

class Landing extends Component {
  render() {
    return (
    ...
    <div style={styles.container}>
      <Button variant="raised" color="primary">
        I am a button
      </Button>
    </div>
    );
  }
}

Prefer to avoid that and stick with Styled Components like this:

const Container = styled.div`
  text-align: "center";
`;

But oddly enough, it's not working even though they appear identical. Is there a difference between text-align and textAlign in terms of CSS properties?

Answer №1

A fantastic method that is effective involves using styled components. Here is the code snippet to implement it:

import React from 'react';
import Button from "react-bootstrap/es/Button";
import styled from 'styled-components';

const Wrapper = styled.div`
 text-align: center;
`;

class MainPage extends React.Component {
    render() {
        return (
          <Wrapper>
            <div>
                <Button color="primary">
                    Click me
                </Button>
            </div>
          </Wrapper>
    )};
};

To make use of the styled component you have chosen, remember to wrap it appropriately. In this case, we are utilizing a wrapper and applying the necessary CSS within it.

If you need further details on styled components or how to incorporate them into your project, check out this link -

Thank you!

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

Storing the current locale in Redux with the help of next-i18next

I am currently working on an application using next.js and next-i18next for language localization. I am in need of a way to save the current locale, but I am unsure of where to do this. Should I store it in the _app.tsx file or the _document.tsx file? An ...

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

I'm encountering an issue where my JS stops working every time I switch displays within a single HTML file. I've attempted to replace the HTML onclick call with a JavaScript function, but the problem persists. Update: Apologies for the unclear e ...

Which material-ui/icons from various versions can enhance the visual appeal of a React project?

Adding icons is something I'm familiar with, so this isn't a repetition of the common "how to add material ui icons to react" inquiries found here. My specific question is how can I determine WHICH icons are available based on the particular ver ...

The Socket.io server is experiencing difficulty in transmitting information to the client

My current challenge involves sending data to the client through Socket.io. Once the connection is established, I expect to receive a message. However, outside of the socket.on('connection') function, the client does not receive any data. UPDAT ...

Which is better: using multiple makeStyles or just one in Material UI?

Uncertain about the best approach in this situation. Is it acceptable to generate styles using makeStyles for each component individually, or would it be better to create one in the base component and simply pass down class names? ...

Verify whether a component is a React.ReactElement<any> instance within a child mapping operation

I am facing a challenge with a component that loops through children and wraps them in a div. I want to exclude certain elements from this process, but I am struggling to determine if the child is a ReactElement or not (React.ReactChild can be a string or ...

Breaking the hierarchy of a Box created within a TabPanel in Material UI

I'm having difficulties accessing the Mui Box that gets automatically created by the Material UI TabPanel. (I would prefer to disable it and use my own container div instead). It comes with a default padding of 24px which I need to override. I can&a ...

What is the method for placing an image retrieved from a pointer as the background image?

In my code, I am retrieving an image from a specific source: <img src={event.eventData?.foto_portada} /> The issue arises when I attempt to utilize that image within my CSS properties as shown below: .background-image { background-image: url(); ...

Transferring 'properties' to child components and selectively displaying them based on conditions

This is the code for my loginButton, which acts as a wrapper for the Button component in another file. 'use client'; import { useRouter } from 'next/navigation'; import { useTransition } from 'react'; interface LoginButtonPr ...

Unable to get `tr:nth-child` to function properly within an MVC view

I have come across many questions regarding my issue, but none seem to offer a solution that works for me. The problem lies with the styling in the upper section of my view (which I plan to transfer to bootstrap later on). My main objective is to implement ...

The feature of adding a new row in the DataTable component of PrimeReact

Is it possible to dynamically add a new row in a PrimeReact datatable on button click, similar to how it's done in PrimeFaces? I couldn't find any documentation on this feature in PrimeReact, even though it is available in PrimeFaces. Link ...

Experiencing difficulties with the alignment of Bootstrap columns

I'm encountering an issue with displaying 3 Bootstrap columns in the ContentArea. Even though I can locate them using Developer tools, they seem to be positioned at the bottom of the ContentArea, making them not visible. I've attempted adjusting ...

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Just diving into Typescript and encountered an issue with a Material UI Slider. I'm trying to update my age state variable, but running into a Typescript error due to the typing of age being number and onChange value being number | number[]. How can I ...

When trying to render a list of items, an error occurs stating that the type void cannot be assigned to type React

Recently, I came across a coding snippet that aims to loop through an object's key-value pairs and display them in a list. import { PersoanaType } from "./PersoanaType"; type Props = { persoana: PersoanaType } export default function P ...

jQuery can be used to automatically close a subnav when another subnav is opened

Currently, my code is almost perfect, but there is a slight issue with allowing multiple sub-navs to be open at the same time. I want to ensure that when one sub-nav is opened, any others automatically close. Essentially, in the jQuery code below, I need ...

Modify Bottom Tab Color in React Native

I am completely new to React Native. For my first project, I dove into using Expo and decided to go with the Tabs template. Now, I am trying to figure out how to change the color of tabs when they are not selected. Can anyone guide me on how to do this? He ...

Angular collapsible panels and floating pop-up windows

I have implemented the Angular UI Bootstrap accordion and popover functionality from http://angular-ui.github.io/bootstrap/. However, I am facing an issue where the popover is only displaying inside the accordion and creating an overlay. Here is the HTML ...

Troubleshooting a login page design issue in Bootstrap with flex containers and background image display

Recently, I've been facing some challenging issues. I'm attempting to design a login page with a basic layout: For screens wider than 800px: Two columns The left side will feature a logo, login form, text box, and button. No background image. ...

Encountering issues while attempting to initiate a React project

Recently, I started a fresh React project using Vite by running npm create vite@latest. However, when I proceeded with npm install and initiated the project with npm run dev, an unexpected error popped up: Error: @rollup/rollup-win32-x64-msvc module not fo ...

Customize your HTML email by highlighting a specific part of a link with color

Can you apply different colors to specific parts of a link when using HTML in an email? I attempted the following: <a href=""><span style="color: #AB2328 !important;">red part of link</span> normal part</a> ...I understand that s ...