score:0
write a css file inside public folder. and link that css file in to your index.html file.
public/css/custom.css
.some-class {
'color' : red
}
public/index.html
<link href="css/custom.css" rel="stylesheet" type="text/css" />
then use that css calss in side classname="some-class"
or
you can directlly do this
style = {{'color' : 'red'}}
or
render() {
const text-color = {
'color' : 'red'
}
return <div style={text-color}></div>
}
score:1
it looks like you use bootstrap
. if you also use webpack
and node_modules
(this folder should be in your project's root directory) then see if the bootstrap folder is there. if it is, then you can connect it that way:
import react from "react";
import "bootstrap/dist/css/bootstrap.css";
if this folder is not there - then install it through the command npm install bootstrap
and you should see the appropriate styles.
also you should add css-loader in your rules
section of webpack
config:
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
https://github.com/webpack-contrib/css-loader
edit:
for old versions of webpack use loaders
keyword:
module: {
loaders: [
{
test: /\.js?/,
include: src_dir,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
],
}
score:1
you can easily grab the button via type. classname did not work for me, too. the "type"-solution works excellent for me:
html:
<button type="no-margin">button</button>
css:
button,
[type="no-margin"] {
margin: 0;
}
Source: stackoverflow.com
Related Query
- class name not working in button tag in react js
- React : CSS class name import not working
- Button Click inside anchor tag not working in React Js Component
- onClick in button tag is not working in react component
- Hamburger menu not working when I change class name using UseState in React
- e.preventDefault not working when I trigger it from Submit button but working when triggered from onSubmit attribute in Form tag in React
- React class component button setState sorting not working as intended
- TouchableOpacity and button not working in react native Modal?
- React SVG tag name provided is not valid
- react native button style not working
- React 16 Radio Button onChange not working
- Back button not working in react native navigation
- React Material-UI "Chip" component's 'x' (delete) button not working
- React Routers not working on button click
- React Native Button onPress is not working
- React class styling from css stylesheet not working
- button onClick methods not working in react app
- react gatsby: adding css class dynamically not working in prod build
- React Event Handler Button Click Not Working on First Click
- OnClick not working when rendering React button on a custom dialog
- React global SCSS: class styling not working
- Not able to add, update, delete rows in material table react using class based component. Previously it was working with functional component
- Image tag not working in react while sending image path from rails backend
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- React Component with Dynamic Tag Name Not Rendered
- Disabled button based on React input fields not working properly
- Centering button on extra small screen Material-UI React not working (justify-xs-center)
- React clearInterval not working in class Component
- Making a toggle button in react with jquery not working
- Link Button to route to the another component is not working in React js
More Query from same tag
- Rendered component in Route does not fire its componentDidMount
- Can we replace ref with className or id in React?
- Redux react inter-component communication
- ReactJS - including other scss files in main.scss
- Bootstrap React tabs are not showing title/Tab name, what is the issue?
- Multiple Exports From React Component Library
- MUI: You have provided an out-of-range value `3` for the select (name="surface_id") componen
- React Redux and react-router-dom
- How to remake and export/import function in React?
- React use setState to update book shelf
- ReactJS shows alert message when link is clicked
- Why is my create-react-app showing README.md, not index.html?
- How to logout user when token expires in react app
- typescript incorrect null/never checks with react refs
- How can I access the local storage on page reload in redux store?
- How to handle Node.js API errors with React
- Event handler for multiple checkboxes using this.bind?
- Redux Toolkit: createAsyncThunk action dispatched and return rejected promise the action returns empty payload
- "Unexpected labeled statement" warnings with Create React App
- Add multiple values from checkbox to array of objects
- Show local images in React-Native NativeBase
- setState() Syntax seems wrong
- Convert objectID or _id from MongoDB Stitch query to string and map it
- How can I save a file from JS app to iCloud?
- How to map elements into two table columns, two elements per row?
- Deploying React + Express App to Kubernetes. How to structure it with docker?
- PropTypes defined, but never used (ESLint, babel 6)
- TS2345: Argument of type 'ReactNode' is not assignable to parameter of type 'ReactElement'
- How to render a code snippet with javascript format by material-ui
- Render a table body in react using the map function