This question may seem simple, but I have been struggling to find an answer even today.
I am attempting to import index.css from main.tsx starting from the root. This should allow me to apply styles like:
<div className="anyStyle" />
Currently, I can only import from a "side css". While I understand that React.js typically separates tsx and css per component, I require a slightly different approach for my specific use case :)
Thank you
To ensure that a CSS file applies to each child component, you can import it into the parent component. Utilizing a bundler like webpack will help in reading the CSS import and loading it correctly. For more information on how to load a CSS file with webpack, refer to this webpack guide on loading CSS
import '../styles.css'
export default function App() {
return (
<main></main>
)
}
Alternatively, you can also directly import the CSS style in the HTML like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="react.js"></script>
</body>
</html>
Here is a simple webpack configuration example:
module.exports = {
entry: {
bundle: './src/app.tsx'
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['*', '.ts', '.tsx', '.js']
},
module: {
rules: [
/*
* Typescript files.
*/
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
/*
* Miscellaneous Files.
*/
{
test: /\.(png|svg|jpg|gif|ttf|otf)$/,
exclude: /node_modules/,
use: [
'file-loader'
]
},
/*
* CSS Files.
*/
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
"postcss-loader"
]
}
]
},
plugins: [
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
};
To download the necessary dependencies using npm, run the following command:
npm i style-loader css-loader postcss-loader
If you're familiar with webpack, which is typically included in projects based on create-react-app, then importing a CSS file should be a breeze for you!
For example, if you have an index.css file with the following content:
.anyStyle: {
margin: 20px;
}
In any component, you can easily import this CSS file like so:
import React, { Component } from 'react';
import './index.css';
class Main extends Component {
render() {
return <div className="anyStyle" />;
}
}
Additionally, here's a helpful resource on using css-loader with webpack and configuring it in your webpack.config (which is already integrated into create-react-app).
I've set up an unordered list with bullet points created using FontAwesome, along with a background and border radius for added style. My issue is that I want the second line of text to align below the first one rather than under the bullet point. ...
Recently, I posted a query regarding an error in my jQuery code. While that was resolved, I am now facing a new challenge where the code appears fine but fails to execute upon clicking "#equals." Below is the relevant excerpt from my code. HTML <div i ...
I have been working on a React form that displays the entered input value in a controlled input element only after the user hits the submit button, rather than updating it constantly as the user types. Here is my current solution using conditional renderin ...
I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...
Currently enrolled in the fullstackopen course, I have reached a section that involves generating production build files for a React application and transferring them to the backend directory for static file hosting. There is a suggestion provided to strea ...
I am facing an issue for which I cannot find a solution. While creating a Drupal site, I am trying to arrange these list items side by side. Each item has a width of 45%, so theoretically it should be possible to have 2 items next to each other. However, ...
I'm currently working on a basic date input component in React, but I've run into an issue when trying to change the value. Every time I update it, it always displays "1970-01-01". If anyone has any suggestions on how to fix this problem, I woul ...
I'm currently using images in place of radio buttons: <label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick=" ...
Is it possible to filter an array based on both the input text from the "searchTerm" state and the selected option from the dropdown menu? I am currently using react-select for the dropdown functionality. const Positions = ({ positions }: dataProps) => ...
This is a snippet of my HTML where I link the .js file <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="CSS/Style.css"> <title> Learning JavaScript </title& ...
Check out my click and drag scrolling Image Viewer here. While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish ...
Seeking assistance - my goal is to display a particular tab using a link from a different page. An illustration can be found [here]. The destination page contains the bulk of the code - Note that the tabs are functioning effectively as they are, I simply ...
I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...
My issue involves using CSS transitions when hovering over links. When the links are live (meaning a href="#" is changed to a href="yahoo.com," for example), the transitions stop working and instead of opening the link, it appends the link destination to t ...
I'm currently utilizing the AutoComplete API from material UI. Within the API, there's an object called top100Films that includes the titles and years of various movies. When I conduct a search using top100Film.title, everything works smoothly as ...
Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...
On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...
I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...
I recently updated my react-hook-forms from version 6 to version 7. Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error: The argument being pass ...
I am facing an issue with the padding at the top of my list items. Here is a link to a working Fiddle: [http://jsfiddle.net/TH3zq/9/][1] http://jsfiddle.net/TH3zq/9/ Can anyone suggest a CSS style solution for this problem? Thanks, John ...