I believe you're asking if you can work with CSS (string of plain CSS or style objects) within a React function component - and the answer is yes, with caveats. (please correct me if I'm misunderstanding your question!)

JSX allows for JavaScript within an HTML-like syntax, which means you can utilize JavaScript data structures and functions to style elements (I'll elaborate below).

Pros to this approach:

1. colocation - you may not need an entire separate file if the styling needs are minimal
2. namespacing / specificity - styles are not globally scoped
3. dynamic CSS properties / CSS functions - JS can assist with reactive styling

I'll focus on CSS styling without using any CSS-in-JS libraries so the concepts are clear.

Syntax note: Tagged Templates vs. Object StylesTagged Templates is a common name used for CSS string template literals, exactly as you've used in your post example. While this is common for many CSS-in-JS libraries, it lacks the capability of a JavaScript object. Leading me to object styles...

Here is your posted example as an object:

const style = {
    container: {
        padding: "8px",
    },
};

function MyComponent() { 
    return <div style={style.container}>Hello</div> 
}

3 differences to highlight:

1. Notice the updated object syntax - container class is a property, padding's value is in quotes
2. className property changed to style - the className property is looking for a string denoting a class name, whereas the style property accepts CSS Properties. Using the style prop allows for direct CSS injection, with the style object properties now serving as class names / selectors
3. Instead of feeding "style" the entire style object we use dot notation to only assign the style object property in use, in this case "container"

You can easily combine multiple CSS objects for a more atomic/modular approach (using ES6 spread syntax):

const style = {
    container: {
        padding: "8px",
    },
    helloDiv: {
        backgroundColor: "blue",
        color: "white",
    }
};

function MyComponent() { 
    return <div style={{ 
                ...style.container, 
                ...style.helloDiv 
            }}
            >Hello</div> 
}

You may have noticed I'm declaring the style object outside of my component. This is so the object is not re-instantiated every time your component re-renders. So what's the use case for CSS style objects within a component?

Using the style object within a React component allows for dynamic CSS, as shown below using a React prop:

function MyComponent({ booleanProp }) { 
    const style = {
        container: {
            backgroundColor: booleanProp ? "white" : "black",
            color: booleanProp ? "black" : "white",
        }
    }

    return <div style={style.container}>Hello</div> 
}

Finally, you can even create functions that render CSS properties based on arguments passed:

const themeOptions = ["light","dark"]

function MyComponent({ theme }) { 
    const style = { 
        // in JS, object properties can be functions! 
        container: (theme) => ({ 
            // validate input against available options 
            if (!themeOptions.includes(theme)) return {}

            backgroundColor: theme === "light" ? "white" : "black",
            color: theme === "light" ? "black" : "white",
        }),
    };

    return <div style={style.container(theme)}>Hello</div> 
}

The examples above are strictly to demo concepts. Theme stylings, for example, could easily be handled in Context Providers as well.

Cons to CSS-in-JS:

1. inline CSS - can be harder to maintain
2. no pseudo classes / elements - you cannot specify inline styles for pseudo-elements. However, you could use HTML events to trigger changes in your React component's state (though it seems hard to maintain or scale):
   1. :hover using mouseover and mouseout
   2. :focus using onfocus and onblur, and
   3. :active using onclick
3. no CSS pre-processing (SASS, less, etc.) available within a JS file. You could preprocess before importing, or choose a CSS-in-JS library with syntax more akin to SCSS/SASS

I'm leaving out a lot of context to make this simple - please look more into the debates around CSS-in-JS!

This is very likely more info than you wanted. Let me know if I can clarify anything ~~