What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN:

loginForm.js:

import React from "react";
import { Button, Form, Header } from "semantic-ui-react";
import styles from './loginForm.css';

const LoginForm = () => (
<Form className={styles.formStyle}>
<Button className={styles.buttonStyle}>Login</Button>
</Form>
);

export default LoginForm;

loginForm.css:

.formStyle {
margin-left: 500px; 
margin-top: 100px;
width: 550px;
}

.buttonStyle {
border-radius: 18px;
width: 200px;
background-color:#3865FE;
}

The CSS code above doesn't seem to be working for loginForm.js. I also tried the following:

<Form style={styles.formStyle}>
    <Button style={styles.buttonStyle}>Login</Button>
  </Form>

However, even this code is not working as expected.

Answer №1

It appears that the className value is being set incorrectly in your code snippet. Here's an updated version with the correct syntax.

import React from "react";
import { Button, Form, Header } from "semantic-ui-react";
import from './loginForm.css';

const LoginForm = () => (
  <Form className='formStyle'>
    <Button className='buttonStyle'>Login</Button>
  </Form>
);

export default LoginForm;

Here is the content of loginForm.css:

.ui.form.formStyle  {
  margin-left: 300px ; 
  margin-top: 100px ;
  width: 550px ;
  height: 400px;
 }

.ui.button.buttonStyle {
  border-radius: 18px;
  width: 200px;
  background-color:#3865FE;
}

A big thank you to @funJoker for the suggestion on styling with semantic-ui.

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

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

How to achieve precise alignment with Material-UI Box components

Could someone assist me in understanding why the alignment between Typography and IconButton is not working properly in my particular scenario? Why is the IconButton positioned lower than the Typography? For reference, here is an example: https://codesand ...

Scrolling down a jQuery div after each new item is added.OR

I have a div acting as a chat feature, where messages are appended based on user actions. I am trying to make it so that the div automatically scrolls down after each message is added, but I'm encountering some issues with this functionality. You can ...

The function named updateContact is not defined, even though it has been declared

Presented below is Angular code snippet: @Component({ selector: 'app-detail-view', templateUrl: './detail-view.component.html', styleUrls: ['./detail-view.component.css'] }) export class DetailViewComponent implements O ...

One click activates the countdown timer, while a second click on the same button pauses it

How can I create a button that allows me to start the countdown timer on the first click and pause it on the second click? I want both functionalities in the same button. Here is an image for reference: https://i.stack.imgur.com/fuyEJ.png I currently ha ...

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

What is the method for obtaining the selected option value while hovering over a dropdown list option?

Hello, I am using the Chosen jQuery plugin to select image options. When I change the trigger, I can easily get a value. Now, I want to be able to get the value when I hover over an option in the select dropdown menu, like shown in the image below, and dis ...

X-editable does not verify if the checklist values are checked

Hello everyone, currently I am working on a Laravel project where I have implemented the X-editable library for inline editing functionalities. I am facing an issue with updating a many-to-many relationship table (pivot table) and I am trying to use the X- ...

Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line. Here's how they look at the moment: Here's the preferred ali ...

Using the express.Router instance for handling errors can be a useful tool in your development

Based on the documentation, it states that any nodejs express middleware function has the capability of being swapped out by App or Router instances: Given that router and app adhere to the middleware interface, they can be used just like any other midd ...

The mapStateToProps function does not yield any data as the data is undefined

Having an issue where mapStateToProps is returning undefined. I suspect there may be issues with dispatching in the state, or perhaps the app is rendering before the data is received from the server. It's puzzling to me. The app functions correctly wi ...

How can I best access the object being exposed on the webpage using <script type="text/json" id="myJSON">?

In our current project, we are successfully using AMD modules to organize and structure our code. One idea I have is to create an AMD module that accesses a script tag using a jQuery ID selector and then parses the content into JSON format. Here's an ...

Tips for utilizing API routes in NextJS 13

Previously, when I utilized Express, I stored the user as request.user: import jwt from "jsonwebtoken"; import asyncHandler from "express-async-handler"; import User from "../models/userModel.js"; const protect = asyncHandl ...

Decoding JSON on 9gag

I am trying to select a random image from the following URL: In order to display it correctly, I need to determine the size of the image. I am utilizing YQL to store the JSON result in a variable (referred to as source). After replacing 'https&apos ...

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

Adjust the size and orientation of an image according to the dimensions of the window and the image

As I delve into HTML and Javascript, I am facing a challenge with resizing an image based on the window size. The goal is for the image to occupy the entire window while maintaining its aspect ratio during resizing. Additionally, if the window size exceeds ...

Having trouble fetching data (node.js) from my client (react.js)

I'm experiencing difficulty retrieving the data I send from the client to the server. Below is my react code: axios.post('http://localhost:5000/post-entry', { data: formData }) .then(res => { console.log(res); }) This is my server cod ...

Choose checkboxes based on the checkboxes that were previously selected

My goal is to have a checkbox automatically selected based on the previously selected checkbox. For example, if I select the first checkbox (which has a specific class), then only the checkbox with the same class as the first one should be selected using j ...