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

I am working on a NodeJs code that utilizes (Array)Buffers and native readUInt16BE. However, since I am working within a browser context, I plan to opt for DataView.getUint16 instead

While working on adapting a JPEG parsing function in Node.js for use in a browser environment, I discovered that the original code can be found here. The challenge lies in using Node.js' Buffer class. To make it compatible with a browser environment, ...

How can I alter the color of the menu text when scrolling to the top of a webpage?

As I navigate my website, I encounter a menu with a transparent background at the top that changes to black as I scroll down. On a specific page where the background is white, this presents an issue: when the menu reaches the top, the white background clas ...

Managing jquery values with cookies for loading, saving, and resetting

I recently implemented screen adjustments on my website using scrollbars. I utilized this example as a reference. Below is the code snippet... HTML CODE: <h1>Image Editor with CSS Filters and jQuery</h1> <!--Form for collecting image URL ...

Toggle the visibility of a component in React by managing its state

Currently, I am faced with the challenge of toggling the visibility of a component based on a state value: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Button from ' ...

Initiate CSS3 animations on each individual slide within the slider

I have integrated flex slider into my project. There are 3 CSS3 animations implemented, where the animations work perfectly on the first slide when the website loads. However, upon switching to the second slide, the animations do not start. I am seeking ...

The Action Creator and Reducer focus on functionality instead of logging to the console, while the component remains connected

Having some trouble connecting a React component to an Action creator and dispatching the action to reducers for rendering data. Redux is being used for state management, but console logging isn't working for some reason, even though it seems like the ...

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

Having more than one controller for a single view in AngularJS

Is it possible to use multiple controllers for a single URL view in AngularJS? I am having trouble finding documentation on this. I want to have a controller that switches the page header title on all pages, but some pages already have a controller. app.j ...

Resize the div blocks by scaling the button placed beneath them

I decided to modify the g-recaptcha widget to fit my specific requirements, and it is working flawlessly. However, I noticed that the ng-click button directly beneath it is no longer responsive. The reason behind this issue eludes me. Here is a snippet of ...

What is the best way to access the attributes of a particular object following a triggered event?

I'm a bit unsure if my title makes sense, so allow me to explain. In a nutshell, I have 2 li elements within a ul list. What I aim for is that when one of these li elements is clicked, the text within that particular li is retrieved, and then an obje ...

Pass a link by pressing Enter

Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: The terms of use appear in a popup where users can ...

Show Pictures Side by Side with Captions Below

I need help organizing multiple images in a row with text underneath for my college project. I've been experimenting with some code but haven't had any success yet. <div class="test"> <p> <a href="https://www.facebook.com" ...

WebGL annotations failing to display on the webpage

I'm currently working on displaying a 3D model using Three.js in a web browser and looking to incorporate annotations like the ones shown in this Sketchfab model: Interactive 3D Test. I came across a helpful guide at this link, but I'm facing iss ...

Ways to link the state array value with a div element

Currently, I am actively learning the React library but have encountered a roadblock regarding a specific syntax. class App extends React.Component{ constructor(){ super() this.state = { array: [1,2] } this.add = this.add.bin ...

I recently created an application using Vue and I'm exploring options for storing information to use later. Would using js-cookie be a viable solution for this?

After experimenting with Vuex to store user-selected information in my app, I found that the data was lost upon page reload. Switching to Cookies and using js-cookie solved this issue seamlessly. It makes me wonder if there is a downside to relying on cook ...

Enhancing serialized form with additional information through an ajax request

I'm currently facing an issue with adding additional data to my serialized form string. The situation is that I have a form with a set of fields called "Services", and users are able to add as many services as they want dynamically using a button in t ...

Leverage the variables' values to access property

There is a way to use this possibility: let eventSelected = "333"; let bestResult = result.personal_records[eventSelected]?.single?.best //like searching like this: result.personal_records.333?.single?.best However, when deali ...

How to keep the Bootstrap column in place while making it fixed

I'm struggling to make the second column (yellow part) stay fixed in position. I've tried using CSS position:fixed, but the column keeps shifting to the left. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/cs ...

Reverse changes made to a massive object and then redo them

My current project requires the implementation of undo-redo functionality for a product. At the moment, I am managing a substantial Object retrieved from a MongoDB collection The structure is as follows: { cart:{ products:[ { name: " ...

The error message "window is not defined" occurs when the external file 'signalr.min.js' is included

Updates OpenTest --version 1.2.2 ChromeDriver 85.0.4183.87 Whenever I attempt to add the necessary external javascript files, it results in the following errors: Caused by: java.lang.RuntimeException: Failed to evaluate JavaScript code at line number 1. ...